Some EuiSuperSelect fixes

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))
 

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;
 }

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 */

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);