fix(Ref): update node if it was changed (#3474)

Semantic-Org · Mar 4, 2019 · 383bcd7 · 383bcd7
1 parent d6f20f9
commit 383bcd7
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/src/addons/Ref/RefFindNode.js b/src/addons/Ref/RefFindNode.js
@@ -17,9 +17,23 @@ export default class RefFindNode extends Component {
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }
 
+  prevNode = null
+
   componentDidMount() {
     // eslint-disable-next-line react/no-find-dom-node
-    handleRef(this.props.innerRef, findDOMNode(this))
+    this.prevNode = findDOMNode(this)
+
+    handleRef(this.props.innerRef, this.prevNode)
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const currentNode = findDOMNode(this)
+
+    if (this.prevNode !== currentNode) {
+      this.prevNode = currentNode
+      handleRef(this.props.innerRef, currentNode)
+    }
   }
 
   componentWillUnmount() {

diff --git a/test/specs/addons/Ref/RefFindNode-test.js b/test/specs/addons/Ref/RefFindNode-test.js
@@ -49,5 +49,37 @@ describe('RefFindNode', () => {
       innerRef.should.have.been.calledOnce()
       innerRef.should.have.been.calledWithMatch(node)
     })
+
+    it('passes an updated node', () => {
+      const innerRef = sandbox.spy()
+      const wrapper = mount(
+        <RefFindNode innerRef={innerRef}>
+          <div />
+        </RefFindNode>,
+      )
+
+      innerRef.should.have.been.calledOnce()
+      innerRef.should.have.calledWithMatch({ tagName: 'DIV' })
+
+      wrapper.setProps({ children: <button /> })
+      innerRef.should.have.been.calledTwice()
+      innerRef.should.have.calledWithMatch({ tagName: 'BUTTON' })
+    })
+
+    it('skips an update if node did not change', () => {
+      const innerRef = sandbox.spy()
+      const wrapper = mount(
+        <RefFindNode innerRef={innerRef}>
+          <div />
+        </RefFindNode>,
+      )
+
+      innerRef.should.have.been.calledOnce()
+      innerRef.should.have.calledWithMatch({ tagName: 'DIV' })
+
+      wrapper.setProps({ children: <div /> })
+      innerRef.should.have.been.calledOnce()
+      innerRef.should.have.calledWithMatch({ tagName: 'DIV' })
+    })
   })
 })