[EuiSelectable] Fix focus management bug (elastic#4152)

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

CHANGELOG.md

@@ -9,6 +9,9 @@
 - Updated types associated with `EuiMarkdownEditor` plugin dependencies ([4124](https://github.com/elastic/eui/pull/4124))
 - Upgraded dependencies related to `EuiMarkdownEditor`: `react-dropzone`, `rehype-*`, `remark-*`, and `unified` ([#4124](https://github.com/elastic/eui/pull/4124))
 
+**Bug fixes**
+- Fixed focus management bug in `EuiSelectable` ([4152](https://github.com/elastic/eui/pull/4152))
+
 **Breaking changes**
 
 - Removed `EuiToggle` and `EuiButtonToggle` in favor of `aria-pressed` ([4056](https://github.com/elastic/eui/pull/4056))

src/components/selectable/selectable.tsx

@@ -154,7 +154,7 @@ export class EuiSelectable<T = {}> extends Component<
     singleSelection: false,
     searchable: false,
   };
-
+  private containerRef = createRef<HTMLDivElement>();
   private optionsListRef = createRef<EuiSelectableList<T>>();
   rootId = htmlIdGenerator();
   constructor(props: EuiSelectableProps<T>) {
@@ -335,7 +335,10 @@ export class EuiSelectable<T = {}> extends Component<
     );
   };
 
-  onContainerBlur = () => {
+  onContainerBlur = (e: React.FocusEvent) => {
+    // Ignore blur events when moving from search to option to avoid activeOptionIndex conflicts
+    if (this.containerRef.current!.contains(e.relatedTarget as Node)) return;
+
     this.setState({
       activeOptionIndex: undefined,
       isFocused: false,
@@ -592,6 +595,7 @@ export class EuiSelectable<T = {}> extends Component<
 
     return (
       <div
+        ref={this.containerRef}
         className={classes}
         onKeyDown={this.onKeyDown}
         onBlur={this.onContainerBlur}