Fix for #8 including test reproducing the problem.

.gitignore

@@ -59,3 +59,9 @@ typings/
 
 # compiled
 dist
+
+# I don't see this committed, so putting in ignore
+package-lock.json
+
+# vim swap files
+**/*.swp

src/index.js

@@ -17,6 +17,7 @@ class EllipisWithTooltip extends React.Component {
     this.state = {
       hasOverflowingChildren: false,
       text: undefined,
+      prevPropsChildren: props.children,
     };
     this.updateOverflow = this.updateOverflow.bind(this);
   }
@@ -35,6 +36,14 @@ class EllipisWithTooltip extends React.Component {
     }
   }
 
+  static getDerivedStateFromProps(props, state) {
+    if (props.children === state.prevPropsChildren) return null;
+    return {
+      hasOverflowingChildren: false,
+      prevPropsChildren: props.children,
+    };
+  }
+
   render() {
     const { hasOverflowingChildren, text } = this.state;
     const {

src/index.test.js

@@ -109,4 +109,41 @@ describe('Ellipsis', () => {
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
+
+  it('should update text when props change', () => {
+    const wrapper = setup('this is some long text');
+    let domElement = wrapper.find('#a div').getDOMNode();
+
+    expect(wrapper.state().hasOverflowingChildren).toEqual(false);
+    Object.defineProperty(domElement, 'clientWidth', {
+      get() {
+        return 300;
+      },
+    });
+    Object.defineProperty(domElement, 'scrollWidth', {
+      get() {
+        return 400;
+      },
+    });
+    wrapper.find('#a div').simulate('mouseEnter');
+    expect(wrapper.state().hasOverflowingChildren).toEqual(true);
+
+    expect(wrapper.state().text).toEqual('this is some long text');
+    wrapper.setProps({ children: 'this changed' });
+    expect(wrapper.state().hasOverflowingChildren).toEqual(false);
+    domElement = wrapper.find('#a div').getDOMNode();
+    Object.defineProperty(domElement, 'clientWidth', {
+      get() {
+        return 300;
+      },
+    });
+    Object.defineProperty(domElement, 'scrollWidth', {
+      get() {
+        return 400;
+      },
+    });
+    wrapper.find('#a div').simulate('mouseEnter');
+    expect(wrapper.state().hasOverflowingChildren).toEqual(true);
+    expect(wrapper.state().text).toEqual('this changed');
+  });
 });