[EuiSelectable] Clear Searchbar Bug Fix (#6317)

* Resolved a bug inside of EuiSelectable that prevented the options list from reappearing when the search bar was alter or emptied via an external function. Added a new test case to catch this instance

* Changelog

* Created Jest test case to validate fix for EuiSelectable issue that caused search results not to appear when the search bar value is controlled by searchProps.value. Removed Cypress test in lieu of a more accurate Jest test.

* Update upcoming_changelogs/6317.md

Co-authored-by: Constance <[email protected]>

Co-authored-by: Constance <[email protected]>

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`