[EuiSuggest][EuiSelectable] Allow controlled search value prop

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added `"xxl"` size to `EuiLoadingSpinner` ([#5668](https://github.com/elastic/eui/pull/5668))
 - Added `isLoading` prop to `EuiButtonIcon` ([#5668](https://github.com/elastic/eui/pull/5668))
 - Updated `EuiDataGrid` to allow setting individual cell `isExpandable` state via `setCellProps` ([#5667](https://github.com/elastic/eui/pull/5667))
+- Added the ability for `EuiSelectable` and `EuiSuggest` to accept controlled `value` props ([#5658](https://github.com/elastic/eui/pull/5658))
 - Added `textWrap` to `EuiSelectableListItem`, `EuiSelectableList`, and `EuiSelectable.listOptions` ([#5679](https://github.com/elastic/eui/issues/5679))
 - Forced `truncation` on `EuiSuggest` items when `isVirtualize` ([#5679](https://github.com/elastic/eui/issues/5679))
 - Changed proportion handling between content and image in `horizontal` `EuiEmptyPrompt` and added spacing between ([#5663](https://github.com/elastic/eui/pull/5663))
@@ -15,9 +16,20 @@
 **Bug fixes**
 
 - Fixed `EuiDataGrid` cell props not resetting on column sort ([#5665](https://github.com/elastic/eui/issues/5665))
+- Fixed `EuiSuggest` not correctly passing props to the search input ([#5658](https://github.com/elastic/eui/pull/5658))
+- Fixed `EuiSelectable` incorrectly rendering the passed `id` prop on the listbox instead of the parent wrapper ([#5658](https://github.com/elastic/eui/pull/5658))
+- Fixed `EuiSelectable` to no longer call `searchProps.onChange` when list items are clicked ([#5658](https://github.com/elastic/eui/pull/5658))
+- Fixed `EuiSelectable` not respecting `searchProps.inputRef` ([#5658](https://github.com/elastic/eui/pull/5658))
 - Fixed render of `EuiSelectableListItem` when no icons are present ([#5679](https://github.com/elastic/eui/issues/5679))
 - Fixed render of `EuiSelectableTemplateSitewide` items when no icons are present ([#5679](https://github.com/elastic/eui/issues/5679))
 
+**Breaking changes**
+
+- Removed the `incremental` prop from `EuiSuggest` and `EuiSelectable`'s `searchProps` ([#5658](https://github.com/elastic/eui/pull/5658))
+- Removed `EuiSelectable`'s `searchProps.onSearch` prop (since Enter keypresses do not trigger a search callback) - use `searchProps.onChange` instead ([#5658](https://github.com/elastic/eui/pull/5658))
+- Renamed `EuiSuggest`'s `onInputChange` and `onSearchChange` callbacks to `onInput`/`onSearch` respectively, for consistency with our existing callback naming conventions ([#5658](https://github.com/elastic/eui/pull/5658))
+- Removed `EuiSuggest`'s `isLoading` prop - use `status.loading` instead ([#5658](https://github.com/elastic/eui/pull/5658))
+
 ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0)
 
 - Added new `renderCellPopover` prop to `EuiDataGrid` ([#5640](https://github.com/elastic/eui/pull/5640))

src-docs/src/views/selectable/search.tsx

@@ -56,6 +56,7 @@ export default () => {
 
   const onWindowKeyDown = (e: any) => {
     if (e.metaKey && e.key.toLowerCase() === 'k') {
+      e.preventDefault();
       window.addEventListener('keyup', onWindowKeyUp);
     }
   };

src-docs/src/views/suggest/playground.js

@@ -0,0 +1,82 @@
+import { PropTypes } from 'react-view';
+import { EuiSuggest } from '../../../../src/components';
+import {
+  propUtilityForPlayground,
+  generateCustomProps,
+  createOptionalEnum,
+  simulateFunction,
+  dummyFunction,
+} from '../../services/playground';
+
+export const suggestConfig = () => {
+  const docgenInfo = Array.isArray(EuiSuggest.__docgenInfo)
+    ? EuiSuggest.__docgenInfo[0]
+    : EuiSuggest.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  const suggestions = `[
+    {
+      type: { iconType: 'kqlField', color: 'tint4' },
+      label: 'Field sample',
+    },
+    {
+      type: { iconType: 'kqlValue', color: 'tint0' },
+      label: 'Value sample',
+    },
+    {
+      type: { iconType: 'kqlSelector', color: 'tint2' },
+      label: 'Conjunction sample',
+    },
+    {
+      type: { iconType: 'kqlOperand', color: 'tint1' },
+      label: 'Operator sample',
+    },
+    {
+      type: { iconType: 'search', color: 'tint8' },
+      label: 'Recent search',
+    },
+    {
+      type: { iconType: 'save', color: 'tint3' },
+      label: 'Saved search',
+    },
+  ]`;
+  propsToUse.suggestions = {
+    ...propsToUse.suggestions,
+    value: suggestions,
+  };
+
+  propsToUse.status = {
+    ...createOptionalEnum(propsToUse.status),
+    defaultValue: 'unchanged',
+  };
+
+  propsToUse.onItemClick = simulateFunction(propsToUse.onItemClick);
+  propsToUse.onInputChange = simulateFunction(propsToUse.onInputChange);
+  propsToUse.onSearchChange = simulateFunction(propsToUse.onSearchChange);
+
+  propsToUse.maxHeight = {
+    ...propsToUse.maxHeight,
+    type: PropTypes.String,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiSuggest',
+      props: propsToUse,
+      scope: {
+        EuiSuggest,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiSuggest'],
+        },
+      },
+      customProps: {
+        ...generateCustomProps(['suggestions']),
+        onItemClick: dummyFunction,
+        onInputChange: dummyFunction,
+        onSearchChange: dummyFunction,
+      },
+    },
+  };
+};

src-docs/src/views/suggest/suggest.tsx

@@ -61,7 +61,7 @@ export default () => {
   const [status, setStatus] = useState<EuiSuggestStatus>('unchanged');
   const [radioIdSelected, setSelectedId] = useState(`${idPrefix}0`);
 
-  const onChange = (optionId: string) => {
+  const onStatusChange = (optionId: string) => {
     setSelectedId(optionId);
     setStatus(radios.find((x) => x.id === optionId)!.value);
   };
@@ -75,15 +75,15 @@ export default () => {
       <EuiRadioGroup
         options={radios}
         idSelected={radioIdSelected}
-        onChange={(id) => onChange(id)}
+        onChange={(id) => onStatusChange(id)}
       />
       <EuiSpacer size="xl" />
       <EuiFormRow label="Suggest" id={idPrefix}>
         <EuiSuggest
           fullWidth
           aria-labelledby={`${idPrefix}-label`}
           status={status}
-          onInputChange={() => {}}
+          onInput={() => {}}
           onItemClick={onItemClick}
           placeholder="Enter query to display suggestions"
           suggestions={sampleItems}

src-docs/src/views/suggest/suggest_example.js

@@ -13,6 +13,7 @@ import {
 
 import Suggest from './suggest';
 const suggestSource = require('!!raw-loader!./suggest');
+import { suggestConfig } from './playground';
 
 import SavedQueries from './saved_queries';
 const savedQueriesSource = require('!!raw-loader!./saved_queries');
@@ -95,6 +96,7 @@ export const SuggestExample = {
       props: { EuiSuggest },
       snippet: suggestSnippet,
       demo: <Suggest />,
+      playground: suggestConfig,
     },
     {
       title: 'Suggest item',

src-docs/src/views/suggest/suggest_item.tsx

@@ -86,7 +86,7 @@ export default ({
       <EuiSuggest
         fullWidth={fullWidth}
         aria-label="Suggest"
-        onInputChange={() => {}}
+        onInput={() => {}}
         placeholder="Enter query to display suggestions"
         isVirtualized={virtualized}
         suggestions={allItems}

src/components/form/field_search/field_search.tsx

@@ -80,9 +80,7 @@ export class EuiFieldSearch extends Component<
   };
 
   state = {
-    value:
-      this.props.value ||
-      (this.props.defaultValue ? `${this.props.defaultValue}` : ''),
+    value: this.props.value || String(this.props.defaultValue || ''),
   };
 
   inputElement: HTMLInputElement | null = null;

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

@@ -6,7 +6,7 @@ exports[`EuiSelectable custom options with data 1`] = `
 >
   <p
     class="euiScreenReaderOnly"
-    id="generated-id-instructions"
+    id="generated-id_instructions"
   >
     Filter options
   </p>
@@ -31,7 +31,7 @@ exports[`EuiSelectable custom options with data 1`] = `
             aria-setsize="3"
             class="euiSelectableListItem euiSelectableListItem--paddingSmall"
             data-test-selected="false"
-            id="generated-id_option-0"
+            id="generated-id_listbox_option-0"
             role="option"
             style="position:absolute;left:0;top:0;height:32px;width:100%"
             title="Titan"
@@ -59,7 +59,7 @@ exports[`EuiSelectable custom options with data 1`] = `
             aria-setsize="3"
             class="euiSelectableListItem euiSelectableListItem--paddingSmall"
             data-test-selected="false"
-            id="generated-id_option-1"
+            id="generated-id_listbox_option-1"
             role="option"
             style="position:absolute;left:0;top:32px;height:32px;width:100%"
             title="Enceladus"
@@ -87,7 +87,7 @@ exports[`EuiSelectable custom options with data 1`] = `
             aria-setsize="3"
             class="euiSelectableListItem euiSelectableListItem--paddingSmall"
             data-test-selected="false"
-            id="generated-id_option-2"
+            id="generated-id_listbox_option-2"
             role="option"
             style="position:absolute;left:0;top:64px;height:32px;width:100%"
             title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
@@ -121,7 +121,7 @@ exports[`EuiSelectable errorMessage prop can render an element as the message 1`
 >
   <p
     class="euiScreenReaderOnly"
-    id="generated-id-instructions"
+    id="generated-id_instructions"
   >
     Filter options
   </p>
@@ -147,7 +147,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
 >
   <p
     class="euiScreenReaderOnly"
-    id="generated-id-instructions"
+    id="generated-id_instructions"
   >
     Filter options
   </p>
@@ -173,7 +173,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
             class="euiSelectableListItem euiSelectableListItem--paddingSmall"
             data-test-selected="false"
             data-test-subj="titanOption"
-            id="generated-id_option-0"
+            id="generated-id_listbox_option-0"
             role="option"
             style="position:absolute;left:0;top:0;height:32px;width:100%"
             title="Titan"
@@ -201,7 +201,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
             aria-setsize="3"
             class="euiSelectableListItem euiSelectableListItem--paddingSmall"
             data-test-selected="false"
-            id="generated-id_option-1"
+            id="generated-id_listbox_option-1"
             role="option"
             style="position:absolute;left:0;top:32px;height:32px;width:100%"
             title="Enceladus"
@@ -229,7 +229,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
             aria-setsize="3"
             class="euiSelectableListItem euiSelectableListItem--paddingSmall"
             data-test-selected="false"
-            id="generated-id_option-2"
+            id="generated-id_listbox_option-2"
             role="option"
             style="position:absolute;left:0;top:64px;height:32px;width:100%"
             title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
@@ -263,7 +263,7 @@ exports[`EuiSelectable errorMessage prop does renders the message when defined 1
 >
   <p
     class="euiScreenReaderOnly"
-    id="generated-id-instructions"
+    id="generated-id_instructions"
   >
     Filter options
   </p>
@@ -287,6 +287,7 @@ exports[`EuiSelectable is rendered 1`] = `
 <div
   class="euiSelectable testClass1 testClass2"
   data-test-subj="test subject string"
+  id="testId"
 />
 `;
 
@@ -338,6 +339,103 @@ exports[`EuiSelectable props singleSelection 1`] = `
 />
 `;
 
+exports[`EuiSelectable search value supports inheriting initialSearchValue from searchProps.defaultValue 1`] = `
+<div
+  class="euiSelectable"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      role="status"
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      role="status"
+    >
+      <p>
+        <strong>
+          default value
+        </strong>
+         doesn't match any options
+      </p>
+    </div>
+  </div>
+  <p
+    class="euiScreenReaderOnly"
+    id="generated-id_instructions"
+  >
+    Filter options
+  </p>
+  <div
+    class="euiText euiText--extraSmall euiSelectableMessage"
+    data-test-subj="euiSelectableMessage"
+    id="generated-id_messageContent"
+  >
+    <div
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <p>
+        <strong>
+          default value
+        </strong>
+         doesn't match any options
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <input
+        aria-activedescendant=""
+        aria-haspopup="listbox"
+        aria-label="Filter options"
+        autocomplete="off"
+        class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch"
+        data-test-subj="searchInput"
+        placeholder="Filter options"
+        type="search"
+        value="default value"
+      />
+      <div
+        class="euiFormControlLayoutIcons"
+      >
+        <span
+          class="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            class="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="search"
+          />
+        </span>
+      </div>
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <button
+          aria-label="Clear input"
+          class="euiFormControlLayoutClearButton"
+          data-test-subj="clearSearchButton"
+          type="button"
+        >
+          <span
+            class="euiFormControlLayoutClearButton__icon"
+            data-euiicon-type="cross"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiSelectable should not reset the activeOptionIndex nor isFocused when EuiSelectable is blurred in favour of its popover 1`] = `
 Object {
   "activeOptionIndex": 0,
@@ -360,8 +458,8 @@ Object {
 
 exports[`EuiSelectable should not reset the activeOptionIndex nor isFocused when EuiSelectable is blurred in favour of its popover 2`] = `
 Object {
-  "activeOptionIndex": undefined,
-  "isFocused": false,
+  "activeOptionIndex": 0,
+  "isFocused": true,
   "searchValue": "",
   "visibleOptions": Array [
     Object {