fix(Search): make clear button in sync with props (carbon-design-syst…

…em#1116)

Fixes carbon-design-system#1103.

package.json

@@ -195,6 +195,9 @@
     "validate-commit-msg": "^2.10.1",
     "whatwg-fetch": "^2.0.3"
   },
+  "resolutions": {
+    "enzyme-adapter-react-16/react-test-renderer": "^16.4.0"
+  },
   "release": {
     "branch": "master"
   },

src/components/Search/Search-test.js

@@ -205,3 +205,36 @@ describe('SearchSkeleton Small', () => {
     });
   });
 });
+
+describe('Detecting change in value from props', () => {
+  it('changes the hasContent state upon change in props', () => {
+    const wrapper = shallow(
+      <Search
+        id="test"
+        className="extra-class"
+        label="Search Field"
+        labelText="testlabel"
+        value="foo"
+      />
+    );
+    expect(wrapper.state().hasContent).toBeTruthy();
+    wrapper.setProps({ value: '' });
+    expect(wrapper.state().hasContent).toBeFalsy();
+  });
+
+  it('avoids change the hasContent state upon setting props, unless the value actually changes', () => {
+    const wrapper = shallow(
+      <Search
+        id="test"
+        className="extra-class"
+        label="Search Field"
+        labelText="testlabel"
+        value="foo"
+      />
+    );
+    expect(wrapper.state().hasContent).toBeTruthy();
+    wrapper.setState({ hasContent: false });
+    wrapper.setProps({ value: 'foo' });
+    expect(wrapper.state().hasContent).toBeFalsy();
+  });
+});

src/components/Search/Search.js

@@ -29,8 +29,19 @@ export default class Search extends Component {
 
   state = {
     hasContent: this.props.value || this.props.defaultValue || false,
+    prevValue: this.props.value,
   };
 
+  static getDerivedStateFromProps({ value }, state) {
+    const { prevValue } = state || {};
+    return state && prevValue === value
+      ? null
+      : {
+          hasContent: !!value,
+          prevValue: value,
+        };
+  }
+
   clearInput = evt => {
     if (!this.props.value) {
       this.input.value = '';