Let VizTypePicker use the keyboard navigation hoc

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

 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
-import withKeyboardNavigation from './withKeyboardNavigation';
+import withKeyboardNavigation, { KeyboardNavigationProps } from './withKeyboardNavigation';
 import { DataSourceSelectItem } from 'app/types';
 
 export interface Props {
-  onChangeDataSource: (ds: any) => void;
+  onChangeDataSource: (ds: DataSourceSelectItem) => void;
   datasources: DataSourceSelectItem[];
-  selected?: number;
-  onKeyDown?: (evt: any, maxSelectedIndex: number, onEnterAction: () => void) => void;
-  onMouseEnter?: (select: number) => void;
 }
 
 interface State {
@@ -17,7 +14,7 @@ interface State {
 }
 
 export const DataSourcePicker = withKeyboardNavigation(
-  class DataSourcePicker extends PureComponent<Props, State> {
+  class DataSourcePicker extends PureComponent<Props & KeyboardNavigationProps, State> {
     searchInput: HTMLElement;
 
     constructor(props) {

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

@@ -4,18 +4,19 @@ import _ from 'lodash';
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
+import withKeyboardNavigation, { KeyboardNavigationProps } from './withKeyboardNavigation';
 
-interface Props {
+export interface Props {
   current: PanelPlugin;
   onTypeChanged: (newType: PanelPlugin) => void;
 }
 
 interface State {
   searchQuery: string;
-  selected: number;
 }
 
-export class VizTypePicker extends PureComponent<Props, State> {
+export const VizTypePicker = withKeyboardNavigation(
+  class VizTypePicker extends PureComponent<Props & KeyboardNavigationProps, State> {
     searchInput: HTMLElement;
     pluginList = this.getPanelPlugins('');
 
@@ -24,7 +25,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
 
       this.state = {
         searchQuery: '',
-      selected: 0,
       };
     }
 
@@ -33,35 +33,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
       return filteredPluginList.length - 1;
     }
 
-  goRight = () => {
-    const nextIndex = this.state.selected >= this.maxSelectedIndex ? 0 : this.state.selected + 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  goLeft = () => {
-    const nextIndex = this.state.selected <= 0 ? this.maxSelectedIndex : this.state.selected - 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  onKeyDown = evt => {
-    if (evt.key === 'ArrowDown') {
-      evt.preventDefault();
-      this.goRight();
-    }
-    if (evt.key === 'ArrowUp') {
-      evt.preventDefault();
-      this.goLeft();
-    }
-    if (evt.key === 'Enter') {
-      const filteredPluginList = this.getFilteredPluginList();
-      this.props.onTypeChanged(filteredPluginList[this.state.selected]);
-    }
-  };
-
     componentDidMount() {
       setTimeout(() => {
         this.searchInput.focus();
@@ -78,14 +49,9 @@ export class VizTypePicker extends PureComponent<Props, State> {
       return _.sortBy(panels, 'sort');
     }
 
-  onMouseEnter = (mouseEnterIndex: number) => {
-    this.setState({
-      selected: mouseEnterIndex,
-    });
-  };
-
     renderVizPlugin = (plugin: PanelPlugin, index: number) => {
-    const isSelected = this.state.selected === index;
+      const { onTypeChanged, selected, onMouseEnter } = this.props;
+      const isSelected = selected === index;
       const isCurrent = plugin.id === this.props.current.id;
       return (
         <VizTypePickerPlugin
@@ -94,9 +60,9 @@ export class VizTypePicker extends PureComponent<Props, State> {
           isCurrent={isCurrent}
           plugin={plugin}
           onMouseEnter={() => {
-          this.onMouseEnter(index);
+            onMouseEnter(index);
           }}
-        onClick={() => this.props.onTypeChanged(plugin)}
+          onClick={() => onTypeChanged(plugin)}
         />
       );
     };
@@ -118,11 +84,12 @@ export class VizTypePicker extends PureComponent<Props, State> {
       this.setState(prevState => ({
         ...prevState,
         searchQuery: value,
-      selected: 0,
       }));
     };
 
     renderFilters = () => {
+      const { searchQuery } = this.state;
+      const { onKeyDown } = this.props;
       return (
         <>
           <label className="gf-form--has-input-icon">
@@ -132,7 +99,15 @@ export class VizTypePicker extends PureComponent<Props, State> {
               placeholder=""
               ref={elem => (this.searchInput = elem)}
               onChange={this.onSearchQueryChange}
-            onKeyDown={this.onKeyDown}
+              value={searchQuery}
+              // onKeyDown={this.props.onKeyDown}
+              onKeyDown={evt => {
+                onKeyDown(evt, this.maxSelectedIndex, () => {
+                  const { onTypeChanged, selected } = this.props;
+                  const vizType = this.getFilteredPluginList()[selected];
+                  onTypeChanged(vizType);
+                });
+              }}
             />
             <i className="gf-form-input-icon fa fa-search" />
           </label>
@@ -153,4 +128,5 @@ export class VizTypePicker extends PureComponent<Props, State> {
         </>
       );
     }
-}
+  }
+);

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

 import React from 'react';
-import { Props } from './DataSourcePicker';
+import { Props as DataSourceProps } from './DataSourcePicker';
+import { Props as VizTypeProps } from './VizTypePicker';
 
 interface State {
   selected: number;
 }
 
+export interface KeyboardNavigationProps {
+  selected?: number;
+  onKeyDown?: (evt: React.KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
+  onMouseEnter?: (select: number) => void;
+}
+
 const withKeyboardNavigation = WrappedComponent => {
-  return class extends React.Component<Props, State> {
+  return class extends React.Component<DataSourceProps | VizTypeProps, State> {
     constructor(props) {
       super(props);