Fix child ref function called twice

It was called first with the child and a second time with the CSSTransitionGroupChild. The same issue was fixed in reactjs/react-transition-group#39. Since this library always creates a wrapper the solution is simpler: just don't chain the ref at all.
marnusw · Oct 11, 2019 · 4a3a660 · 4a3a660
1 parent 41cfab4
commit 4a3a660
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 16 deletions.
diff --git a/packages/react-css-transition-replace/package.json b/packages/react-css-transition-replace/package.json
@@ -19,7 +19,6 @@
     "postpublish": "rm *.md"
   },
   "dependencies": {
-    "chain-function": "^1.0.0",
     "dom-helpers": "^3.3.1",
     "prop-types": "^15.7.2"
   },

diff --git a/packages/react-css-transition-replace/src/ReactCSSTransitionReplace.js b/packages/react-css-transition-replace/src/ReactCSSTransitionReplace.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { findDOMNode } from 'react-dom'
 import PropTypes from 'prop-types'
-import chain from 'chain-function'
 
 import raf from 'dom-helpers/util/requestAnimationFrame'
 
@@ -228,13 +227,6 @@ export default class ReactCSSTransitionReplace extends React.Component {
     )
   }
 
-  storeChildRef(child, key) {
-    const isCallbackRef = typeof child.ref !== 'string'
-    return chain(isCallbackRef ? child.ref : null, r => {
-      this.childRefs[key] = r
-    })
-  }
-
   render() {
     const { currentKey, currentChild, prevChildren, height, width } = this.state
     const childrenToRender = []
@@ -306,7 +298,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
             notifyLeaving && typeof child.type !== 'string'
               ? React.cloneElement(child, { isLeaving: true })
               : child,
-            { ref: this.storeChildRef(child, key) },
+            { ref: r => (this.childRefs[key] = r) },
           ),
         ),
       )
@@ -326,7 +318,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
               ? { position: 'relative' }
               : null,
           },
-          this.wrapChild(currentChild, { ref: this.storeChildRef(currentChild, currentKey) }),
+          this.wrapChild(currentChild, { ref: r => (this.childRefs[currentKey] = r) }),
         ),
       )
     }

diff --git a/yarn.lock b/yarn.lock
@@ -2465,11 +2465,6 @@ caseless@~0.12.0:
   resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chain-function@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
-  integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==
-
 chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"