Fix UX bugs via internal prop override 😬

cee-chen · cee-chen · commit 3c9c5107e67a · 2024-04-15T09:55:30.000-07:00
diff --git a/src-docs/src/views/selectable/selectable_sizing.tsx b/src-docs/src/views/selectable/selectable_sizing.tsx
@@ -234,10 +234,12 @@ const SelectableInputPopover = () => {
         onFocus: () => setIsOpen(true),
         onBlur: () => setIsOpen(false),
       }}
-      isPreFiltered={!isSearching} // Shows the full list when not actively typing to search
       listProps={{
         css: { '.euiSelectableList__list': { maxBlockSize: 200 } },
+        // @ts-ignore - Override search highlighting when a selection is chosen
+        searchValue: isSearching ? inputValue : '',
       }}
+      isPreFiltered={!isSearching} // Shows the full list when not actively typing to search
     >
       {(list, search) => (
         <EuiInputPopover
