Use react's onKeyDown event on the input instead of event listener on document

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

@@ -47,7 +47,7 @@ export class VizTypePicker extends PureComponent<Props, State> {
     });
     });
   };
   };
 
 
-  onKeydown = (evt: KeyboardEvent) => {
+  onKeyDown = evt => {
     if (evt.key === 'ArrowDown') {
     if (evt.key === 'ArrowDown') {
       evt.preventDefault();
       evt.preventDefault();
       this.goRight();
       this.goRight();
@@ -66,12 +66,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
     setTimeout(() => {
     setTimeout(() => {
       this.searchInput.focus();
       this.searchInput.focus();
     }, 300);
     }, 300);
-
-    document.addEventListener('keydown', this.onKeydown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeydown);
   }
   }
 
 
   getPanelPlugins(filter): PanelPlugin[] {
   getPanelPlugins(filter): PanelPlugin[] {
@@ -138,6 +132,7 @@ export class VizTypePicker extends PureComponent<Props, State> {
             placeholder=""
             placeholder=""
             ref={elem => (this.searchInput = elem)}
             ref={elem => (this.searchInput = elem)}
             onChange={this.onSearchQueryChange}
             onChange={this.onSearchQueryChange}
+            onKeyDown={this.onKeyDown}
           />
           />
           <i className="gf-form-input-icon fa fa-search" />
           <i className="gf-form-input-icon fa fa-search" />
         </label>
         </label>