From 81a96bcc46084cc27e8c13a1df707ceab01142a2 Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Thu, 24 May 2018 17:49:17 +0200
Subject: [PATCH] Unmount InputWithAutofocus after close

---
 .../FilterOptions/InputWithAutoFocus.js       |  8 +++----
 .../src/components/FilterOptions/index.js     |  4 ++--
 .../components/FiltersPickWrapper/index.js    | 23 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js
index 2d458eb096..db0d2d5542 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js
@@ -1,6 +1,6 @@
 /**
  *
- * InputWithAutofocus that programatically manage the autofocus of another one
+ * InputWithAutoFocus that programatically manage the autofocus of another one
  */
 
 import React from 'react';
@@ -30,7 +30,7 @@ const getInputType = (attrType) => {
 };
 
 
-class InputWithAutofocus extends React.Component {
+class InputWithAutoFocus extends React.Component {
   componentDidMount() {
     if (this.props.filterToFocus === this.props.index) {
       return new Promise(resolve => {
@@ -63,7 +63,7 @@ class InputWithAutofocus extends React.Component {
   }
 }
 
-InputWithAutofocus.propTypes = {
+InputWithAutoFocus.propTypes = {
   filter: PropTypes.object.isRequired,
   filterToFocus: PropTypes.oneOfType([
     PropTypes.object,
@@ -76,4 +76,4 @@ InputWithAutofocus.propTypes = {
   schema: PropTypes.object.isRequired,
 };
 
-export default InputWithAutofocus;
+export default InputWithAutoFocus;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js
index 7126dc840f..2239fefb8c 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js
@@ -12,7 +12,7 @@ import InputSelect from 'components/InputSelect/Loadable';
 
 import Add from './Add';
 import Div from './Div';
-import InputWithAutofocus from './InputWithAutofocus';
+import InputWithAutoFocus from './InputWithAutoFocus';
 import InputWrapper from './InputWrapper';
 import Remove from './Remove';
 
@@ -50,7 +50,7 @@ function FilterOptions({ filter, filterToFocus, index, onChange, onClickAdd, onC
       />
       <Wrapper>
         {show && (
-          <InputWithAutofocus
+          <InputWithAutoFocus
             filter={filter}
             filterToFocus={filterToFocus}
             index={index}
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js
index 18a9641686..a6d336ce93 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js
@@ -22,6 +22,8 @@ import SpanStyled from './SpanStyled';
 import Wrapper from './Wrapper';
 
 class FiltersPickWrapper extends React.PureComponent {
+  state = { showInput: false };
+
   componentDidMount() {
     // Display the first filter
     if (this.props.appliedFilters.length === 0) {
@@ -36,6 +38,25 @@ class FiltersPickWrapper extends React.PureComponent {
     if (prevProps.show !== show && show && appliedFilters.length === 0) {
       this.handleClickAdd();
     }
+
+    if (prevProps.show !== show) {
+      if (show) {
+        this.mountInput();
+      } else {
+        this.unmountInput();
+      }
+    }
+  }
+
+  mountInput = () => this.setState({ showInput: true });
+
+  unmountInput = () => {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        this.setState({ showInput: false });
+        resolve();
+      }, 500);
+    });
   }
 
   generateActions = () => ([
@@ -137,7 +158,7 @@ class FiltersPickWrapper extends React.PureComponent {
                     onClickAdd={this.handleClickAdd}
                     onClickRemove={this.handleClickRemove}
                     schema={schema}
-                    show={show}
+                    show={this.state.showInput}
                     showAddButton={this.shouldDisplayAddButton(key)}
                   />
                 ))}