diff --git a/CHANGELOG.md b/CHANGELOG.md index 855c2416588..8da06cadf09 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,12 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `5.0.0`. +**Bug fixes** + +- Fixed size of `EuiSuperSelect`'s dropdown menu when there is no initial selection ([#1295](https://github.com/elastic/eui/pull/1295)) ## [`5.0.0`](https://github.com/elastic/eui/tree/v5.0.0) -- Added `EuiToken` component ([#1270](https://github.com/elastic/eui/pull/1270)) +- Added `EuiToken` component ([#1270](https://github.com/elastic/eui/pull/1270)) - Added `beaker` icon to `EuiIcon` and updated the `EuiBetaBadge` styling ([#1291](https://github.com/elastic/eui/pull/1291/)) - Removed calls to deprecated `findDOMNode` ([#1285](https://github.com/elastic/eui/pull/1285)) diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss index 902081301b3..3fcac3ec053 100644 --- a/src/components/form/super_select/_super_select.scss +++ b/src/components/form/super_select/_super_select.scss @@ -27,6 +27,14 @@ @include euiBottomShadowFlat; /* 2 */ } +.euiSuperSelect__item { + &:hover, + &:focus { + text-decoration: none; + background-color: $euiFocusBackgroundColor; + } +} + .euiSuperSelect__item--hasDividers:not(:last-of-type) { border-bottom: $euiBorderThin; } diff --git a/src/components/form/super_select/_super_select_control.scss b/src/components/form/super_select/_super_select_control.scss index b32d0e71cf6..db60bc3fce9 100644 --- a/src/components/form/super_select/_super_select_control.scss +++ b/src/components/form/super_select/_super_select_control.scss @@ -1,12 +1,14 @@ /** * 1. Leave room for caret. * 2. Ensure the descenders don't get cut off + * 3. Makes sure the height is correct when there's no selection */ .euiSuperSelectControl { @include euiFormControlStyle; @include euiFormControlWithIcon($side: "right"); /* 1 */ @include euiFormControlIsLoading($isNextToIcon: true); + display: block; /* 3 */ text-align: left; line-height: $euiFormControlHeight; /* 2 */ diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index a92df04b555..864325c6e92 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -47,19 +47,19 @@ export class EuiSuperSelect extends Component { null ); - // valueOfSelected is optional, and options may not exist yet - if (indexOfSelected != null) { - // wait for the CSS classes to be applied, removing visibility: hidden - requestAnimationFrame(() => { - this.focusItemAt(indexOfSelected); - - this.setState({ - menuWidth: this.popoverRef.getBoundingClientRect().width - 2, // account for border not inner shadow - }); + requestAnimationFrame(() => { + this.setState({ + menuWidth: this.popoverRef.getBoundingClientRect().width - 2, // account for border not inner shadow }); - } else { - requestAnimationFrame(focusSelected); - } + + if (this.props.valueOfSelected != null) { + if (indexOfSelected != null) { + this.focusItemAt(indexOfSelected); + } else { + focusSelected(); + } + } + }); }; requestAnimationFrame(focusSelected);