Unmount component when fading out to reset its state, such as search..

public/app/core/components/Animations/FadeIn.tsx

@@ -5,6 +5,7 @@ interface Props {
   duration: number;
   duration: number;
   children: JSX.Element;
   children: JSX.Element;
   in: boolean;
   in: boolean;
+  unmountOnExit?: boolean;
 }
 }
 
 
 export const FadeIn: SFC<Props> = props => {
 export const FadeIn: SFC<Props> = props => {
@@ -21,7 +22,7 @@ export const FadeIn: SFC<Props> = props => {
   };
   };
 
 
   return (
   return (
-    <Transition in={props.in} timeout={props.duration}>
+    <Transition in={props.in} timeout={props.duration} unmountOnExit={props.unmountOnExit || false}>
       {state => (
       {state => (
         <div
         <div
           style={{
           style={{

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

@@ -117,7 +117,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
         </div>
         </div>
         <div className="panel-editor__scroll">
         <div className="panel-editor__scroll">
           <CustomScrollbar autoHide={false}>
           <CustomScrollbar autoHide={false}>
-            <FadeIn in={isOpen} duration={200}>
+            <FadeIn in={isOpen} duration={200} unmountOnExit={true}>
               <div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
               <div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
             </FadeIn>
             </FadeIn>
             <div className="panel-editor__content">
             <div className="panel-editor__content">