Fixed clear button not showing when external input value is passed.

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Replaced usage of `displayName` with `inputValue` prop in `EuiFieldSearch` ([#3497](https://github.com/elastic/eui/pull/3497))
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
 - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))

src/components/form/field_search/__snapshots__/field_search.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`EuiFieldSearch is rendered 1`] = `
 <eui-form-control-layout
-  clear="[object Object]"
   compressed="false"
   fullwidth="false"
   icon="search"
@@ -35,6 +34,7 @@ exports[`EuiFieldSearch props append is rendered 1`] = `
     <input
       class="euiFieldSearch euiFieldText--inGroup"
       type="search"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -51,6 +51,7 @@ exports[`EuiFieldSearch props fullWidth is rendered 1`] = `
     <input
       class="euiFieldSearch euiFieldSearch--fullWidth"
       type="search"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -69,6 +70,7 @@ exports[`EuiFieldSearch props isInvalid is rendered 1`] = `
     <input
       class="euiFieldSearch"
       type="search"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -85,6 +87,7 @@ exports[`EuiFieldSearch props isLoading is rendered 1`] = `
     <input
       class="euiFieldSearch euiFieldSearch-isLoading"
       type="search"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -102,6 +105,7 @@ exports[`EuiFieldSearch props prepend is rendered 1`] = `
     <input
       class="euiFieldSearch euiFieldText--inGroup"
       type="search"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>

src/components/form/field_search/field_search.tsx

@@ -70,6 +70,11 @@ export interface EuiFieldSearchProps
    * `string` | `ReactElement` or an array of these
    */
   append?: EuiFormControlLayoutProps['append'];
+
+  /**
+   * Input value to be set externally
+   */
+  inputValue?: string;
 }
 
 interface EuiFieldSearchState {
@@ -91,7 +96,7 @@ export class EuiFieldSearch extends Component<
   };
 
   state = {
-    value: this.props.value || '',
+    value: '',
   };
 
   inputElement: HTMLInputElement | null = null;
@@ -115,6 +120,17 @@ export class EuiFieldSearch extends Component<
     }
   }
 
+  componentDidUpdate(prevProps: EuiFieldSearchProps) {
+    if (prevProps.inputValue !== this.props.inputValue) {
+      this.changeValue();
+    }
+  }
+
+  changeValue = () => {
+    const { inputValue } = this.props;
+    this.setState({ value: inputValue || '' });
+  };
+
   onClear = () => {
     // clear the field's value
 
@@ -182,8 +198,6 @@ export class EuiFieldSearch extends Component<
     incremental?: boolean,
     onSearch?: (value: string) => void
   ) => {
-    this.setState({ value: (event.target as HTMLInputElement).value });
-
     if (this.props.onKeyUp) {
       this.props.onKeyUp(event);
       if (event.defaultPrevented) {
@@ -216,11 +230,11 @@ export class EuiFieldSearch extends Component<
       isClearable,
       append,
       prepend,
+      inputValue,
       ...rest
     } = this.props;
 
-    let value = this.props.value;
-    if (typeof this.props.value !== 'string') value = this.state.value;
+    const { value } = this.state;
 
     const classes = classNames(
       'euiFieldSearch',
@@ -251,6 +265,10 @@ export class EuiFieldSearch extends Component<
             type="search"
             id={id}
             name={name}
+            value={this.state.value}
+            onChange={e => {
+              this.setState({ value: e.target.value });
+            }}
             placeholder={placeholder}
             className={classes}
             onKeyUp={e => this.onKeyUp(e, incremental, onSearch)}

src/components/search_bar/__snapshots__/search_bar.test.tsx.snap

@@ -35,10 +35,8 @@ exports[`SearchBar render - no config, no query 1`] = `
     grow={true}
   >
     <EuiSearchBox
-      incremental={false}
       isInvalid={false}
       onSearch={[Function]}
-      placeholder="Search..."
       query=""
     />
   </EuiFlexItem>
@@ -56,10 +54,8 @@ exports[`SearchBar render - provided query, filters 1`] = `
     grow={true}
   >
     <EuiSearchBox
-      incremental={false}
       isInvalid={false}
       onSearch={[Function]}
-      placeholder="Search..."
       query="this is a query"
     />
   </EuiFlexItem>
@@ -168,10 +164,8 @@ exports[`SearchBar render - tools 1`] = `
     grow={true}
   >
     <EuiSearchBox
-      incremental={false}
       isInvalid={false}
       onSearch={[Function]}
-      placeholder="Search..."
       query=""
     />
   </EuiFlexItem>

src/components/search_bar/__snapshots__/search_box.test.tsx.snap

@@ -6,10 +6,9 @@ exports[`EuiSearchBox render - custom placeholder and incremental 1`] = `
   className="testClass1 testClass2"
   compressed={false}
   data-test-subj="test subject string"
-  defaultValue=""
   fullWidth={true}
   incremental={true}
-  inputRef={[Function]}
+  inputValue=""
   isClearable={true}
   isLoading={false}
   onSearch={[Function]}
@@ -23,10 +22,9 @@ exports[`EuiSearchBox render - no config 1`] = `
   className="testClass1 testClass2"
   compressed={false}
   data-test-subj="test subject string"
-  defaultValue=""
   fullWidth={true}
   incremental={false}
-  inputRef={[Function]}
+  inputValue=""
   isClearable={true}
   isLoading={false}
   onSearch={[Function]}

src/components/search_bar/search_box.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import { EuiFieldSearch, EuiFieldSearchProps } from '../form';
 
 export interface SchemaType {
@@ -32,43 +32,24 @@ export interface EuiSearchBoxProps extends EuiFieldSearchProps {
   onSearch: (queryText: string) => void;
 }
 
-type DefaultProps = Pick<EuiSearchBoxProps, 'placeholder' | 'incremental'>;
-
-export class EuiSearchBox extends Component<EuiSearchBoxProps> {
-  static defaultProps: DefaultProps = {
-    placeholder: 'Search...',
-    incremental: false,
-  };
-
-  private inputElement: HTMLInputElement | null = null;
-
-  componentDidUpdate(oldProps: EuiSearchBoxProps) {
-    if (oldProps.query !== this.props.query && this.inputElement != null) {
-      this.inputElement.value = this.props.query;
-    }
-  }
-
-  render() {
-    const { query, incremental, ...rest } = this.props;
-
-    let ariaLabel;
-    if (incremental) {
-      ariaLabel =
-        'This is a search bar. As you type, the results lower in the page will automatically filter.';
-    } else {
-      ariaLabel =
-        'This is a search bar. After typing your query, hit enter to filter the results lower in the page.';
-    }
-
-    return (
-      <EuiFieldSearch
-        inputRef={input => (this.inputElement = input)}
-        fullWidth
-        defaultValue={query}
-        incremental={incremental}
-        aria-label={ariaLabel}
-        {...rest}
-      />
-    );
-  }
-}
+export const EuiSearchBox = ({
+  placeholder = 'Search...',
+  query,
+  incremental = false,
+  ...rest
+}: EuiSearchBoxProps) => {
+  const ariaLabel = incremental
+    ? 'This is a search bar. As you type, the results lower in the page will automatically filter.'
+    : 'This is a search bar. After typing your query, hit enter to filter the results lower in the page.';
+
+  return (
+    <EuiFieldSearch
+      fullWidth
+      incremental={incremental}
+      aria-label={ariaLabel}
+      inputValue={query}
+      placeholder={placeholder}
+      {...rest}
+    />
+  );
+};

src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`EuiSelectableSearch is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiSelectableSearch props defaultValue 1`] = `
+exports[`EuiSelectableSearch props inputValue 1`] = `
 <div
   class="euiFormControlLayout euiFormControlLayout--fullWidth"
 >
@@ -43,7 +43,7 @@ exports[`EuiSelectableSearch props defaultValue 1`] = `
       class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
       placeholder="Filter options"
       type="search"
-      value="Mi"
+      value=""
     />
     <div
       class="euiFormControlLayoutIcons"

src/components/selectable/selectable_search/selectable_search.test.tsx

@@ -33,9 +33,9 @@ describe('EuiSelectableSearch', () => {
   });
 
   describe('props', () => {
-    test('defaultValue', () => {
+    test('inputValue', () => {
       const component = render(
-        <EuiSelectableSearch options={[]} defaultValue="Mi" />
+        <EuiSelectableSearch options={[]} inputValue="Mi" />
       );
 
       expect(component).toMatchSnapshot();

src/components/selectable/selectable_search/selectable_search.tsx

@@ -91,7 +91,7 @@ export class EuiSelectableSearch extends Component<
         placeholder="Filter options"
         onSearch={this.onSearchChange}
         incremental
-        defaultValue={defaultValue}
+        inputValue={defaultValue}
         fullWidth
         {...rest}
       />