Update EuiFieldSearch to show a clear button when defaultValue is pre…

…sent (#3958) * Fixed bug where EuiFieldSearch did not show a clear button when a defaultValue is present * changelog
elastic · Aug 24, 2020 · d406bc6 · d406bc6
1 parent 5d71d2f
commit d406bc6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Fixed bug in `EuiBasicTable` not fully expanding tall rows (height > 1000px) ([#3855](https://github.com/elastic/eui/pull/3855))
 - Added `regressionJob`, `outlierDetectionJob` and `classificationJob` icons to Machine Learning icon set, updated others. ([#3931](https://github.com/elastic/eui/pull/3931))
 - Fixed bug in `EuiDataGrid` which sometimes prevented header cells from being focusabled ([#3943](https://github.com/elastic/eui/pull/3943))
+- Fixed bug in `EuiFieldSearch` where a default value would not include the clear button ([#3958](https://github.com/elastic/eui/pull/3958))
 
 ## [`28.2.0`](https://github.com/elastic/eui/tree/v28.2.0)
 

diff --git a/src-docs/src/views/search_bar/controlled_search_bar.js b/src-docs/src/views/search_bar/controlled_search_bar.js
@@ -57,7 +57,7 @@ const loadTags = () => {
   });
 };
 
-const initialQuery = EuiSearchBar.Query.MATCH_ALL;
+const initialQuery = 'status:open';
 
 export const ControlledSearchBar = () => {
   const [query, setQuery] = useState(initialQuery);

diff --git a/src/components/form/field_search/field_search.tsx b/src/components/form/field_search/field_search.tsx
@@ -91,7 +91,9 @@ export class EuiFieldSearch extends Component<
   };
 
   state = {
-    value: this.props.value || '',
+    value:
+      this.props.value ||
+      (this.props.defaultValue ? `${this.props.defaultValue}` : ''),
   };
 
   inputElement: HTMLInputElement | null = null;

diff --git a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
@@ -70,6 +70,20 @@ exports[`EuiSelectableSearch props defaultValue 1`] = `
         />
       </span>
     </div>
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <button
+        aria-label="Clear input"
+        class="euiFormControlLayoutClearButton"
+        type="button"
+      >
+        <div
+          class="euiFormControlLayoutClearButton__icon"
+          data-euiicon-type="cross"
+        />
+      </button>
+    </div>
   </div>
 </div>
 `;