Mobile Web: Auto-focus cursor in the search box (#5284)

* Mobile Web: Auto-focus cursor in the search box and open keyboard when the search icon is tapped

* fixed issue with safari mobile view

* added isFocus props to search_bar.jsx component

* used 'x' and fixed spacing

* changed 'x' icon and fixed css

* added aria-hidden='true'

1 files changed, 26 insertions, 6 deletions

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index 4296d6da9..1c9f607e6 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -54,6 +54,12 @@ export default class SearchBar extends React.Component {
     componentDidMount() {
         SearchStore.addSearchTermChangeListener(this.onListenerChange);
         this.mounted = true;
+
+        if (Utils.isMobile()) {
+            setTimeout(() => {
+                document.querySelector('.app__body .sidebar--menu').classList.remove('visible');
+            });
+        }
     }
 
     componentWillUnmount() {
@@ -76,6 +82,12 @@ export default class SearchBar extends React.Component {
     handleClose(e) {
         e.preventDefault();
 
+        if (Utils.isMobile()) {
+            setTimeout(() => {
+                document.querySelector('.app__body .sidebar--menu').classList.add('visible');
+            });
+        }
+
         AppDispatcher.handleServerAction({
             type: ActionTypes.RECEIVED_SEARCH,
             results: null
@@ -261,7 +273,7 @@ export default class SearchBar extends React.Component {
             );
         }
 
-        let clearClass = 'sidebar__clear-icon';
+        let clearClass = 'sidebar__search-clear';
         if (!this.state.isSearching && this.state.searchTerm && this.state.searchTerm.trim() !== '') {
             clearClass += ' visible';
         }
@@ -295,13 +307,19 @@ export default class SearchBar extends React.Component {
                         listComponent={SearchSuggestionList}
                         providers={this.suggestionProviders}
                         type='search'
+                        autoFocus={this.props.isFocus}
                     />
-                    <span
+                    <div
                         className={clearClass}
                         onClick={this.handleClear}
                     >
-                        <i className='fa fa-times'/>
-                    </span>
+                        <span
+                            className='sidebar__search-clear-x'
+                            aria-hidden='true'
+                        >
+                            {'×'}
+                        </span>
+                    </div>
                     {isSearching}
                     {this.renderHintPopover(helpClass)}
                 </form>
@@ -314,10 +332,12 @@ export default class SearchBar extends React.Component {
 }
 
 SearchBar.defaultProps = {
-    showMentionFlagBtns: true
+    showMentionFlagBtns: true,
+    isFocus: false
 };
 
 SearchBar.propTypes = {
     showMentionFlagBtns: React.PropTypes.bool,
-    isCommentsPage: React.PropTypes.bool
+    isCommentsPage: React.PropTypes.bool,
+    isFocus: React.PropTypes.bool
 };