Merge pull request #3236 from weseek/fix/remain-getHelpElement-in-case-of-mobile

Fix/remain get help element in case of mobile

src/client/js/components/SearchForm.jsx

@@ -13,10 +13,13 @@ class SearchForm extends React.Component {
 
     this.state = {
       searchError: null,
+      isShownHelp: false,
     };
 
     this.onSearchError = this.onSearchError.bind(this);
     this.onChange = this.onChange.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+    this.onFocus = this.onFocus.bind(this);
   }
 
   componentDidMount() {
@@ -40,12 +43,28 @@ class SearchForm extends React.Component {
     }
   }
 
+  onBlur() {
+    this.setState({
+      isShownHelp: false,
+    });
+
+    this.getHelpElement();
+  }
+
+  onFocus() {
+    this.setState({
+      isShownHelp: true,
+    });
+  }
+
   getHelpElement() {
     const { t, appContainer } = this.props;
+    const { isShownHelp } = this.state;
 
     const config = appContainer.getConfig();
     const isReachable = config.isSearchServiceReachable;
 
+
     if (!isReachable) {
       return (
         <>
@@ -55,6 +74,10 @@ class SearchForm extends React.Component {
       );
     }
 
+    if (!isShownHelp) {
+      return null;
+    }
+
     return (
       <table className="table grw-search-table search-help m-0">
         <caption className="text-left text-primary p-2">
@@ -124,6 +147,8 @@ class SearchForm extends React.Component {
         placeholder={placeholder}
         helpElement={this.getHelpElement()}
         keywordOnInit={this.props.keyword}
+        onBlur={this.onBlur}
+        onFocus={this.onFocus}
       />
     );
   }

src/client/js/components/SearchTypeahead.jsx

@@ -222,6 +222,8 @@ class SearchTypeahead extends React.Component {
           renderMenuItemChildren={this.renderMenuItemChildren}
           caseSensitive={false}
           defaultSelected={defaultSelected}
+          onBlur={this.props.onBlur}
+          onFocus={this.props.onFocus}
         />
         {resetFormButton}
       </div>
@@ -244,6 +246,8 @@ SearchTypeahead.propTypes = {
   onSearchSuccess: PropTypes.func,
   onSearchError:   PropTypes.func,
   onChange:        PropTypes.func,
+  onBlur:          PropTypes.func,
+  onFocus:         PropTypes.func,
   onSubmit:        PropTypes.func,
   onInputChange:   PropTypes.func,
   inputName:       PropTypes.string,