Fix styling for vizPicker keyboard nav and change so only arrow up/down is OK to use

public/app/features/dashboard/dashgrid/VizTypePicker.tsx

@@ -50,10 +50,12 @@ export class VizTypePicker extends PureComponent<Props, State> {
   };
   };
 
 
   onKeydown = (evt: KeyboardEvent) => {
   onKeydown = (evt: KeyboardEvent) => {
-    if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
+    if (evt.key === 'ArrowDown') {
+      evt.preventDefault();
       this.goRight();
       this.goRight();
     }
     }
-    if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
+    if (evt.key === 'ArrowUp') {
+      evt.preventDefault();
       this.goLeft();
       this.goLeft();
     }
     }
     if (evt.key === 'Enter') {
     if (evt.key === 'Enter') {
@@ -84,6 +86,12 @@ export class VizTypePicker extends PureComponent<Props, State> {
     return _.sortBy(panels, 'sort');
     return _.sortBy(panels, 'sort');
   }
   }
 
 
+  onMouseEnter = (mouseEnterIndex: number) => {
+    this.setState({
+      selected: mouseEnterIndex,
+    });
+  };
+
   renderVizPlugin = (plugin: PanelPlugin, index: number) => {
   renderVizPlugin = (plugin: PanelPlugin, index: number) => {
     const isSelected = this.state.selected === index;
     const isSelected = this.state.selected === index;
     const isCurrent = plugin.id === this.props.current.id;
     const isCurrent = plugin.id === this.props.current.id;
@@ -93,6 +101,9 @@ export class VizTypePicker extends PureComponent<Props, State> {
         isSelected={isSelected}
         isSelected={isSelected}
         isCurrent={isCurrent}
         isCurrent={isCurrent}
         plugin={plugin}
         plugin={plugin}
+        onMouseEnter={() => {
+          this.onMouseEnter(index);
+        }}
         onClick={() => this.props.onTypeChanged(plugin)}
         onClick={() => this.props.onTypeChanged(plugin)}
       />
       />
     );
     );

public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx

 import React from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import classNames from 'classnames';
+import { PanelPlugin } from 'app/types/plugins';
 
 
 interface Props {
 interface Props {
   isSelected: boolean;
   isSelected: boolean;
   isCurrent: boolean;
   isCurrent: boolean;
-  plugin: any;
+  plugin: PanelPlugin;
   onClick: () => void;
   onClick: () => void;
+  onMouseEnter: () => void;
 }
 }
 
 
 const VizTypePickerPlugin = React.memo(
 const VizTypePickerPlugin = React.memo(
-  ({ isSelected, isCurrent, plugin, onClick }: Props) => {
+  ({ isSelected, isCurrent, plugin, onClick, onMouseEnter }: Props) => {
     const cssClass = classNames({
     const cssClass = classNames({
       'viz-picker__item': true,
       'viz-picker__item': true,
       'viz-picker__item--selected': isSelected,
       'viz-picker__item--selected': isSelected,
@@ -17,7 +19,7 @@ const VizTypePickerPlugin = React.memo(
     });
     });
 
 
     return (
     return (
-      <div className={cssClass} onClick={onClick} title={plugin.name}>
+      <div className={cssClass} onClick={onClick} title={plugin.name} onMouseEnter={onMouseEnter}>
         <div className="viz-picker__item-name">{plugin.name}</div>
         <div className="viz-picker__item-name">{plugin.name}</div>
         <img className="viz-picker__item-img" src={plugin.info.logos.small} />
         <img className="viz-picker__item-img" src={plugin.info.logos.small} />
       </div>
       </div>

public/sass/components/_panel_editor.scss

@@ -157,32 +157,15 @@
   padding-bottom: 6px;
   padding-bottom: 6px;
   transition: transform 1 ease;
   transition: transform 1 ease;
 
 
-  &:hover {
-    box-shadow: $panel-editor-viz-item-shadow-hover;
-    background: $panel-editor-viz-item-bg-hover;
-    border: $panel-editor-viz-item-border-hover;
-  }
-
   &--current {
   &--current {
     box-shadow: 0 0 6px $orange;
     box-shadow: 0 0 6px $orange;
     border: 1px solid $orange;
     border: 1px solid $orange;
-
-    &:hover {
-      box-shadow: 0 0 6px $orange;
-      border: 1px solid $orange;
-      background: $panel-editor-viz-item-bg-hover-active;
-    }
   }
   }
 
 
   &--selected {
   &--selected {
-    box-shadow: 0 0 6px $purple;
-    border: 1px solid $purple;
-
-    &:hover {
-      box-shadow: 0 0 6px $purple;
-      border: 1px solid $purple;
-      background: $panel-editor-viz-item-bg-hover-active;
-    }
+    box-shadow: $panel-editor-viz-item-shadow-hover;
+    background: $panel-editor-viz-item-bg-hover;
+    border: $panel-editor-viz-item-border-hover;
   }
   }
 }
 }