Re-focus EuiSuperSelect input after making a value change (#3734)

* Re-focus EuiSuperSelect input after making a value change * changelog
elastic · Jul 14, 2020 · f7d5843 · f7d5843
1 parent 9dacc39
commit f7d5843
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git 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/...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/...onents/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
@@ -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
@@ -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>