[EuiSelectable] Prevent onFocus from negating selection (#5117)

* pass initial click event through to option * revert me * CL
elastic · Sep 1, 2021 · 005f9e3 · 005f9e3
1 parent c5bf1c8
commit 005f9e3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)}