Bug/1152 controlled searchbar

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 **Bug fixes**
 
+- Fixed `EuiSearchBar` when used as a controlled component in React 16.4 ([#1153](https://github.com/elastic/eui/pull/1153))
 - Fixed `onChange` typedef on `EuiSwitch` ([#1144](https://github.com/elastic/eui/pull/1144)
 - Fixed `EuiToolTip`'s inability to update its position when tooltip content changes ([#1116](https://github.com/elastic/eui/pull/1116))
 

src-docs/src/views/search_bar/controlled_search_bar.js

@@ -70,7 +70,6 @@ export class ControlledSearchBar extends Component {
     super(props);
     this.state = {
       query: initialQuery,
-      result: items,
       error: null,
       incremental: false
     };
@@ -82,7 +81,6 @@ export class ControlledSearchBar extends Component {
     } else {
       this.setState({
         error: null,
-        result: EuiSearchBar.Query.execute(query, items, { defaultFields: ['owner', 'tag', 'type'] }),
         query
       });
     }

src/components/search_bar/filters/field_value_toggle_group_filter.js

@@ -5,7 +5,7 @@ import { EuiPropTypes } from '../../../utils/prop_types';
 import { Query } from '../query';
 
 export const FieldValueToggleGroupFilterItemType = PropTypes.shape({
-  value: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
   name: PropTypes.string.isRequired,
   negatedName: PropTypes.string
 });

src/components/search_bar/search_bar.js

@@ -85,8 +85,8 @@ export class EuiSearchBar extends Component {
     };
   }
 
-  static getDerivedStateFromProps(nextProps) {
-    if (nextProps.query) {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.query && (!prevState.query || nextProps.query.text !== prevState.query.text)) {
       const query = parseQuery(nextProps.query, nextProps);
       return {
         query,
@@ -97,8 +97,9 @@ export class EuiSearchBar extends Component {
     return null;
   }
 
-  componentDidUpdate(oldProps, oldState) {
-    const { query, queryText, error } = this.state;
+  notifyControllingParent(newState) {
+    const oldState = this.state;
+    const { query, queryText, error } = newState;
 
     const isQueryDifferent = oldState.queryText !== queryText;
 
@@ -114,14 +115,17 @@ export class EuiSearchBar extends Component {
   onSearch = (queryText) => {
     try {
       const query = parseQuery(queryText, this.props);
+      this.notifyControllingParent({ query, queryText, error: null });
       this.setState({ query, queryText, error: null });
     } catch (e) {
       const error = { message: e.message };
+      this.notifyControllingParent({ query: null, queryText, error });
       this.setState({ queryText, error });
     }
   };
 
   onFiltersChange = (query) => {
+    this.notifyControllingParent({ query, queryText: query.text, error: null });
     this.setState({
       query,
       queryText: query.text,

src/components/search_bar/search_bar.test.js

@@ -4,6 +4,7 @@ import { requiredProps } from '../../test';
 import { mount, shallow } from 'enzyme';
 import { EuiSearchBar } from './search_bar';
 import { Query } from './query';
+import { ENTER } from '../../services/key_codes';
 
 describe('SearchBar', () => {
   test('render - no config, no query', () => {
@@ -79,38 +80,23 @@ describe('SearchBar', () => {
   });
 
   describe('controlled input', () => {
-    test('calls onChange callback when a new query is passed', () => {
+    test('calls onChange callback when the query is modified', () => {
       const onChange = jest.fn();
 
       const component = mount(
         <EuiSearchBar
-          query=""
+          query="status:active"
           onChange={onChange}
+          box={{ 'data-test-subj': 'searchbar' }}
         />
       );
 
-      component.setProps({ query: 'is:active' });
+      component.find('input[data-test-subj="searchbar"]').simulate('keyup', { keyCode: ENTER, target: { value: 'status:inactive' } });
 
       expect(onChange).toHaveBeenCalledTimes(1);
       const [[{ query, queryText }]] = onChange.mock.calls;
       expect(query).toBeInstanceOf(Query);
-      expect(queryText).toBe('is:active');
-    });
-
-    test('does not call onChange when an unwatched prop changes', () => {
-      const onChange = jest.fn();
-
-      const component = mount(
-        <EuiSearchBar
-          query="is:active"
-          isFoo={false}
-          onChange={onChange}
-        />
-      );
-
-      component.setProps({ isFoo: true });
-
-      expect(onChange).toHaveBeenCalledTimes(0);
+      expect(queryText).toBe('status:inactive');
     });
   });
 });