fix(Search): defaultValue prop support (#57)

* test(Search): fix search input value rendering test

 - test checks the `defaultValue` instead of the `value`
 - updating the test to check `value` fails
 - expected value `"test"`
 - received value `""`

* fix(Search): defaultValue prop support

Author: ritch

components/Search.js

@@ -24,23 +24,14 @@ class Search extends Component {
 
   state = {
     format: 'list',
-    value: '',
-    hasContent: false,
   };
 
   toggleClearIcon = evt => {
-    const hasContent = evt.target.value.length > 0;
-    this.setState({
-      hasContent,
-      value: evt.target.value,
-    });
+    this.input.value = evt.target.value;
   };
 
   clearInput = () => {
-    this.setState({
-      value: '',
-      hasContent: false,
-    });
+    this.input.value = '';
     this.input.focus();
   };
 
@@ -123,9 +114,11 @@ class Search extends Component {
       [className]: className,
     });
 
+    const hasContent = Boolean(this.input) && Boolean(this.input.value);
+
     const clearClasses = classNames({
       'bx--search-close': true,
-      'bx--search-close--hidden': !this.state.hasContent,
+      'bx--search-close--hidden': hasContent,
     });
 
     return (
@@ -142,7 +135,6 @@ class Search extends Component {
           className="bx--search-input"
           id={id}
           placeholder={placeHolderText}
-          value={this.state.value}
           onInput={this.toggleClearIcon}
           ref={input => {
             this.input = input;

components/__tests__/Search-test.js

@@ -41,6 +41,7 @@ describe('Search', () => {
         expect(textInput.props().defaultValue).toEqual(undefined);
         wrapper.setProps({ defaultValue: 'test' });
         expect(textInput.props().defaultValue).toEqual('test');
+        expect(textInput.props().value).toEqual(undefined);
       });
 
       it('should set placeholder as expected', () => {