From 9e028d82139133d03cd922540ced6d63fec8188a Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Mon, 19 Oct 2020 16:34:59 -0400
Subject: [PATCH] [EuiSelectable] Fix focus management bug (#4152)

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 CHANGELOG.md                             | 3 +++
 src/components/selectable/selectable.tsx | 8 ++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0795e91ad88..38edf3ad8c9 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
index 90f95ebb897..be5b7b6a999 100644
--- a/src/components/selectable/selectable.tsx
+++ b/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}