From f39fef2a027879d5c7385fc8b8e5515a938a6487 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 11 Feb 2019 11:03:24 +0100
Subject: [PATCH] Clear visualization picker search on picker close

---
 package.json                                           |  1 +
 public/app/core/components/Animations/FadeIn.tsx       | 10 ++++++++--
 .../dashboard/panel_editor/VisualizationTab.tsx        |  6 +++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 5ac751ced3f..fae51a1d856 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@types/react-dom": "^16.0.9",
     "@types/react-grid-layout": "^0.16.6",
     "@types/react-select": "^2.0.4",
+    "@types/react-transition-group": "^2.0.15",
     "@types/react-virtualized": "^9.18.12",
     "angular-mocks": "1.6.6",
     "autoprefixer": "^6.4.0",
diff --git a/public/app/core/components/Animations/FadeIn.tsx b/public/app/core/components/Animations/FadeIn.tsx
index ea9a92d5f0f..d667b54261e 100644
--- a/public/app/core/components/Animations/FadeIn.tsx
+++ b/public/app/core/components/Animations/FadeIn.tsx
@@ -1,11 +1,12 @@
 import React, { FC } from 'react';
-import Transition from 'react-transition-group/Transition';
+import Transition, { ExitHandler } from 'react-transition-group/Transition';
 
 interface Props {
   duration: number;
   children: JSX.Element;
   in: boolean;
   unmountOnExit?: boolean;
+  onExited?: ExitHandler;
 }
 
 export const FadeIn: FC<Props> = props => {
@@ -22,7 +23,12 @@ export const FadeIn: FC<Props> = props => {
   };
 
   return (
-    <Transition in={props.in} timeout={props.duration} unmountOnExit={props.unmountOnExit || false}>
+    <Transition
+      in={props.in}
+      timeout={props.duration}
+      unmountOnExit={props.unmountOnExit || false}
+      onExited={props.onExited}
+    >
       {state => (
         <div
           style={{
diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
index 0aeb8af41d9..37f109250a7 100644
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@@ -149,6 +149,10 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
   }
 
+  clearQuery = () => {
+    this.setState({ searchQuery: '' });
+  };
+
   onPanelOptionsChanged = (options: any) => {
     this.props.panel.updateOptions(options);
     this.forceUpdate();
@@ -241,7 +245,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
         setScrollTop={this.setScrollTop}
       >
         <>
-          <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
+          <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true} onExited={this.clearQuery}>
             <VizTypePicker
               current={plugin}
               onTypeChanged={this.onTypeChanged}