diff --git a/CHANGELOG.md b/CHANGELOG.md index 63a0319afd9..29dd8a56e9c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,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 extends Component< private itemNodes: Array = []; 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 extends Component< if (this.props.onChange) { this.props.onChange(value); } + if (this.buttonRef) { + this.buttonRef.focus(); + } }; onSelectKeyDown = (event: React.KeyboardEvent) => { @@ -339,6 +350,7 @@ export class EuiSuperSelect extends Component< anchorPosition="downCenter" ownFocus={false} popoverRef={this.setPopoverRef} + buttonRef={this.setButtonRef} hasArrow={false} buffer={0}>