Skip to content

Commit 4a3a660

Browse files
committed
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.
1 parent 41cfab4 commit 4a3a660

File tree

3 files changed

+2
-16
lines changed

3 files changed

+2
-16
lines changed

packages/react-css-transition-replace/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"postpublish": "rm *.md"
2020
},
2121
"dependencies": {
22-
"chain-function": "^1.0.0",
2322
"dom-helpers": "^3.3.1",
2423
"prop-types": "^15.7.2"
2524
},

packages/react-css-transition-replace/src/ReactCSSTransitionReplace.js

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import { findDOMNode } from 'react-dom'
33
import PropTypes from 'prop-types'
4-
import chain from 'chain-function'
54

65
import raf from 'dom-helpers/util/requestAnimationFrame'
76

@@ -228,13 +227,6 @@ export default class ReactCSSTransitionReplace extends React.Component {
228227
)
229228
}
230229

231-
storeChildRef(child, key) {
232-
const isCallbackRef = typeof child.ref !== 'string'
233-
return chain(isCallbackRef ? child.ref : null, r => {
234-
this.childRefs[key] = r
235-
})
236-
}
237-
238230
render() {
239231
const { currentKey, currentChild, prevChildren, height, width } = this.state
240232
const childrenToRender = []
@@ -306,7 +298,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
306298
notifyLeaving && typeof child.type !== 'string'
307299
? React.cloneElement(child, { isLeaving: true })
308300
: child,
309-
{ ref: this.storeChildRef(child, key) },
301+
{ ref: r => (this.childRefs[key] = r) },
310302
),
311303
),
312304
)
@@ -326,7 +318,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
326318
? { position: 'relative' }
327319
: null,
328320
},
329-
this.wrapChild(currentChild, { ref: this.storeChildRef(currentChild, currentKey) }),
321+
this.wrapChild(currentChild, { ref: r => (this.childRefs[currentKey] = r) }),
330322
),
331323
)
332324
}

yarn.lock

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2465,11 +2465,6 @@ caseless@~0.12.0:
24652465
resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
24662466
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
24672467

2468-
chain-function@^1.0.0:
2469-
version "1.0.1"
2470-
resolved "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
2471-
integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==
2472-
24732468
chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
24742469
version "2.4.2"
24752470
resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"

0 commit comments

Comments
 (0)