From 005f9e3afd9e2e5a6cc178b3fae053a00bbf75b0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 1 Sep 2021 11:30:57 -0500
Subject: [PATCH] [EuiSelectable] Prevent `onFocus` from negating selection
 (#5117)

* pass initial click event through to option

* revert me

* CL
---
 CHANGELOG.md                                      |  1 +
 src-docs/src/views/selectable/data.ts             |  2 +-
 .../src/views/selectable/selectable_popover.js    | 15 ++++++++-------
 src/components/selectable/selectable.tsx          | 14 ++++++++++++++
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49b8a302c6c..b2e5bfafc81 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 **Bug fixes**
 
 - Fixed `EuiSuperSelect`'s focus keyboard behavior when no initial value is passed, and focus label behavior ([#5097](https://github.com/elastic/eui/pull/5097))
+- Fixed `EuiSelectable` sometimes requiring two clicks to change selection ([#5117](https://github.com/elastic/eui/pull/5117))
 
 ## [`37.5.0`](https://github.com/elastic/eui/tree/v37.5.0)
 
diff --git a/src-docs/src/views/selectable/data.ts b/src-docs/src/views/selectable/data.ts
index 67f425d3394..09fde670b97 100644
--- a/src-docs/src/views/selectable/data.ts
+++ b/src-docs/src/views/selectable/data.ts
@@ -11,7 +11,7 @@ export const Options: EuiSelectableOption[] = [
   },
   {
     label: 'Mimas',
-    checked: 'on',
+    // checked: 'on',
   },
   {
     label: 'Dione',
diff --git a/src-docs/src/views/selectable/selectable_popover.js b/src-docs/src/views/selectable/selectable_popover.js
index ef54613fb06..60491174c81 100644
--- a/src-docs/src/views/selectable/selectable_popover.js
+++ b/src-docs/src/views/selectable/selectable_popover.js
@@ -12,7 +12,7 @@ import {
   EuiSpacer,
   EuiTitle,
 } from '../../../../src/components';
-import { Comparators } from '../../../../src/services/sort';
+// import { Comparators } from '../../../../src/services/sort';
 
 import { Options } from './data';
 import { createDataStore } from '../tables/data_store';
@@ -32,7 +32,7 @@ export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
 
   const onButtonClick = () => {
-    setOptions(options.slice().sort(Comparators.property('checked')));
+    // setOptions(options.slice().sort(Comparators.property('checked')));
     setIsPopoverOpen(!isPopoverOpen);
   };
 
@@ -72,11 +72,12 @@ export default () => {
         closePopover={closePopover}
       >
         <EuiSelectable
-          searchable
-          searchProps={{
-            placeholder: 'Filter list',
-            compressed: true,
-          }}
+          // searchable
+          singleSelection={true}
+          // searchProps={{
+          //   placeholder: 'Filter list',
+          //   compressed: true,
+          // }}
           options={options}
           onChange={onChange}
         >
diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
index 7063ec46521..83da8e18337 100644
--- a/src/components/selectable/selectable.tsx
+++ b/src/components/selectable/selectable.tsx
@@ -152,6 +152,7 @@ export class EuiSelectable<T = {}> extends Component<
   };
   private containerRef = createRef<HTMLDivElement>();
   private optionsListRef = createRef<EuiSelectableList<T>>();
+  private preventOnFocus = false;
   rootId = htmlIdGenerator();
   constructor(props: EuiSelectableProps<T>) {
     super(props);
@@ -212,7 +213,19 @@ export class EuiSelectable<T = {}> extends Component<
     return this.state.activeOptionIndex != null;
   };
 
+  onMouseDown = () => {
+    // Bypass onFocus when a click event originates from this.containerRef.
+    // Prevents onFocus from scrolling away from a clicked option and negating the selection event.
+    // https://github.com/elastic/eui/issues/4147
+    this.preventOnFocus = true;
+  };
+
   onFocus = () => {
+    if (this.preventOnFocus) {
+      this.preventOnFocus = false;
+      return;
+    }
+
     if (!this.state.visibleOptions.length || this.state.activeOptionIndex) {
       return;
     }
@@ -618,6 +631,7 @@ export class EuiSelectable<T = {}> extends Component<
         onKeyDown={this.onKeyDown}
         onBlur={this.onContainerBlur}
         onFocus={this.onFocus}
+        onMouseDown={this.onMouseDown}
         {...rest}
       >
         {children && children(list, search)}