[EuiSelectable] Clear Searchbar Bug Fix

src/components/selectable/selectable.spec.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+/// <reference types="cypress" />
 /// <reference types="../../../cypress/support"/>
 
 import React, { useState } from 'react';

src/components/selectable/selectable.test.tsx

@@ -204,6 +204,41 @@ describe('EuiSelectable', () => {
       ).toEqual('second value');
     });
 
+    it('updates options list when searchValue state is controlled by searchProps.value', () => {
+      const searchProps = {
+        value: 'Enceladus',
+        'data-test-subj': 'searchInput',
+      };
+      const component = mount(
+        <EuiSelectable options={options} searchable searchProps={searchProps}>
+          {(list, search) => (
+            <>
+              {list}
+              {search}
+            </>
+          )}
+        </EuiSelectable>
+      );
+
+      expect(
+        (component.find('EuiSelectableList').props() as any).visibleOptions
+      ).toHaveLength(1);
+
+      component.setProps({
+        searchProps: { ...searchProps, value: 'value not in list' },
+      });
+
+      expect(component.find('EuiSelectableList').exists()).toBeFalsy();
+
+      component.setProps({
+        searchProps: { ...searchProps, value: '' },
+      });
+
+      expect(
+        (component.find('EuiSelectableList').props() as any).visibleOptions
+      ).toEqual(options);
+    });
+
     it('calls the searchProps.onChange callback on mount', () => {
       const onChange = jest.fn();
       mount(

src/components/selectable/selectable.tsx

@@ -240,28 +240,28 @@ export class EuiSelectable<T = {}> extends Component<
     const { options, isPreFiltered, searchProps } = nextProps;
     const { activeOptionIndex, searchValue } = prevState;
 
-    const matchingOptions = getMatchingOptions<T>(
-      options,
-      searchValue,
-      isPreFiltered
-    );
-
     const stateUpdate: Partial<EuiSelectableState<T>> = {
-      visibleOptions: matchingOptions,
+      searchValue,
       activeOptionIndex,
     };
 
+    if (searchProps?.value != null && searchProps.value !== searchValue) {
+      stateUpdate.searchValue = searchProps.value;
+    }
+
+    stateUpdate.visibleOptions = getMatchingOptions<T>(
+      options,
+      stateUpdate.searchValue ?? '',
+      isPreFiltered
+    );
+
     if (
       activeOptionIndex != null &&
-      activeOptionIndex >= matchingOptions.length
+      activeOptionIndex >= stateUpdate.visibleOptions.length
     ) {
       stateUpdate.activeOptionIndex = -1;
     }
 
-    if (searchProps?.value != null && searchProps.value !== searchValue) {
-      stateUpdate.searchValue = searchProps.value;
-    }
-
     return stateUpdate;
   }
 

upcoming_changelogs/6317.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSelectable` to ensure the full options list is re-displayed when the search bar is controlled and cleared using `searchProps.value`