From 1ffac5a33dc8327d1588796411072b0ef0e98668 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Mon, 10 Dec 2018 21:38:07 +0100
Subject: [PATCH] Use react's onKeyDown event on the input instead of event
 listener on document

---
 public/app/features/dashboard/dashgrid/VizTypePicker.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
index bc1643abbd7..eff51ada020 100644
--- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
+++ b/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') {
       evt.preventDefault();
       this.goRight();
@@ -66,12 +66,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
     setTimeout(() => {
       this.searchInput.focus();
     }, 300);
-
-    document.addEventListener('keydown', this.onKeydown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeydown);
   }
 
   getPanelPlugins(filter): PanelPlugin[] {
@@ -138,6 +132,7 @@ export class VizTypePicker extends PureComponent<Props, State> {
             placeholder=""
             ref={elem => (this.searchInput = elem)}
             onChange={this.onSearchQueryChange}
+            onKeyDown={this.onKeyDown}
           />
           <i className="gf-form-input-icon fa fa-search" />
         </label>