From f7d584398599346175aaa331241b531a8818647e Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 13 Jul 2020 18:33:09 -0600
Subject: [PATCH] Re-focus EuiSuperSelect input after making a value change
 (#3734)

* Re-focus EuiSuperSelect input after making a value change

* changelog
---
 CHANGELOG.md                                         |  1 +
 .../__snapshots__/color_palette_picker.test.tsx.snap |  1 +
 .../__snapshots__/super_select.test.tsx.snap         |  1 +
 src/components/form/super_select/super_select.tsx    | 12 ++++++++++++
 4 files changed, 15 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d1ab884c07..4af6dd7741b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 - Fixed a bug in `EuiResizableContainer` preventing nested containers ([#3699](https://github.com/elastic/eui/pull/3699))
 - Fixed a bug in `EuiResizableContainer` preventing resizing by arrow keys in some cases ([#3699](https://github.com/elastic/eui/pull/3699))
 - Fixed `EuiHorizontalSteps` rendering over `EuiHeader` ([#3707](https://github.com/elastic/eui/pull/3707))
+- Fixed bug where `EuiSuperSelect` lost focus after a value selection ([#3734](https://github.com/elastic/eui/pull/3734))
 
 **Breaking changes**
 
diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index efb9a26ad61..4f5462bd6dd 100644
--- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -710,6 +710,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 2`] = `
           value="paletteFixed"
         />
       }
+      buttonRef={[Function]}
       className="euiSuperSelect"
       closePopover={[Function]}
       display="block"
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index f0958f150b8..22679969f1c 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -558,6 +558,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
         value="1"
       />
     }
+    buttonRef={[Function]}
     className="euiSuperSelect"
     closePopover={[Function]}
     display="block"
diff --git a/src/components/form/super_select/super_select.tsx b/src/components/form/super_select/super_select.tsx
index 0a5771377ca..a331e7725d8 100644
--- a/src/components/form/super_select/super_select.tsx
+++ b/src/components/form/super_select/super_select.tsx
@@ -101,6 +101,14 @@ export class EuiSuperSelect<T extends string> extends Component<
 
   private itemNodes: Array<HTMLButtonElement | null> = [];
   private popoverRef: HTMLDivElement | null = null;
+  private buttonRef: HTMLElement | null = null;
+  private setButtonRef = (popoverButtonRef: HTMLDivElement | null) => {
+    if (popoverButtonRef) {
+      this.buttonRef = popoverButtonRef.querySelector('button')!;
+    } else {
+      this.buttonRef = null;
+    }
+  };
   private _isMounted: boolean = false;
 
   state = {
@@ -178,6 +186,9 @@ export class EuiSuperSelect<T extends string> extends Component<
     if (this.props.onChange) {
       this.props.onChange(value);
     }
+    if (this.buttonRef) {
+      this.buttonRef.focus();
+    }
   };
 
   onSelectKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
@@ -339,6 +350,7 @@ export class EuiSuperSelect<T extends string> extends Component<
         anchorPosition="downCenter"
         ownFocus={false}
         popoverRef={this.setPopoverRef}
+        buttonRef={this.setButtonRef}
         hasArrow={false}
         buffer={0}>
         <EuiScreenReaderOnly>