Merge pull request #15350 from grafana/fix/clear-search-on-vizpicker-close

Clear visualization picker search on picker close

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",

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={{

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}