fix(Ref): update node if it was changed

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fixed distance of the `content` and `reactionGroup` from the `badge` in the `ChatMessage` component for Teams theme @mnajdova ([#986](https://github.com/stardust-ui/react/pull/986))
 - Do not propagate keyboard events outside `Popup`'s content @sophieH29 ([#987](https://github.com/stardust-ui/react/pull/987/))
 - Fixed emoji `Icon` spacing issue and added settings `Icon` ([#991](https://github.com/stardust-ui/react/pull/991))
+- Call update `node` if it was changed for `Ref` component @layershifter ([#993](https://github.com/stardust-ui/react/pull/993))
 
 ### Features
 - Add `delay` prop for `Loader` component @layershifter ([#969](https://github.com/stardust-ui/react/pull/969))

packages/react/src/components/Ref/RefFindNode.tsx

@@ -21,8 +21,21 @@ export default class RefFindNode extends React.Component<RefFindNodeProps> {
     innerRef: customPropTypes.ref,
   }
 
+  prevNode: Node = null
+
   componentDidMount() {
-    handleRef(this.props.innerRef, ReactDOM.findDOMNode(this))
+    this.prevNode = ReactDOM.findDOMNode(this)
+
+    handleRef(this.props.innerRef, this.prevNode)
+  }
+
+  componentDidUpdate() {
+    const currentNode = ReactDOM.findDOMNode(this)
+
+    if (this.prevNode !== currentNode) {
+      this.prevNode = currentNode
+      handleRef(this.props.innerRef, currentNode)
+    }
   }
 
   componentWillUnmount() {

packages/react/test/specs/components/Ref/RefFindNode-test.tsx

@@ -1,22 +1,22 @@
 import { mount } from 'enzyme'
 import * as React from 'react'
 
-import Ref from 'src/components/Ref/Ref'
+import RefFindNode from 'src/components/Ref/RefFindNode'
 import { CompositeClass, CompositeFunction, DOMClass, DOMFunction } from './fixtures'
 
 const testInnerRef = Component => {
   const innerRef = jest.fn()
   const node = mount(
-    <Ref innerRef={innerRef}>
+    <RefFindNode innerRef={innerRef}>
       <Component />
-    </Ref>,
+    </RefFindNode>,
   ).getDOMNode()
 
   expect(innerRef).toHaveBeenCalledTimes(1)
   expect(innerRef).toHaveBeenCalledWith(node)
 }
 
-describe('Ref', () => {
+describe('RefFindNode', () => {
   describe('innerRef', () => {
     it('returns node from a functional component with DOM node', () => {
       testInnerRef(DOMFunction)
@@ -37,9 +37,9 @@ describe('Ref', () => {
     it('returns "null" after unmount', () => {
       const innerRef = jest.fn()
       const wrapper = mount(
-        <Ref innerRef={innerRef}>
+        <RefFindNode innerRef={innerRef}>
           <CompositeClass />
-        </Ref>,
+        </RefFindNode>,
       )
 
       innerRef.mockClear()
@@ -48,5 +48,35 @@ describe('Ref', () => {
       expect(innerRef).toHaveBeenCalledTimes(1)
       expect(innerRef).toHaveBeenCalledWith(null)
     })
+
+    it('passes an updated node', () => {
+      const innerRef = jest.fn()
+      const wrapper = mount(
+        <RefFindNode innerRef={innerRef}>
+          <div />
+        </RefFindNode>,
+      )
+
+      expect(innerRef).toHaveBeenCalledWith(expect.objectContaining({ tagName: 'DIV' }))
+      wrapper.setProps({ children: <button /> })
+
+      expect(innerRef).toHaveBeenCalledTimes(2)
+      expect(innerRef).toHaveBeenCalledWith(expect.objectContaining({ tagName: 'BUTTON' }))
+    })
+
+    it('skips an update if node did not change', () => {
+      const innerRef = jest.fn()
+      const wrapper = mount(
+        <RefFindNode innerRef={innerRef}>
+          <div />
+        </RefFindNode>,
+      )
+
+      expect(innerRef).toHaveBeenCalledWith(expect.objectContaining({ tagName: 'DIV' }))
+      wrapper.setProps({ children: <div /> })
+
+      expect(innerRef).toHaveBeenCalledTimes(1)
+      expect(innerRef).toHaveBeenCalledWith(expect.objectContaining({ tagName: 'DIV' }))
+    })
   })
 })