Some EuiSuperSelect fixes

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