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'

5 files changed, 53 insertions, 14 deletions

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 9be2d5b58..01e1e98cf 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -765,7 +765,12 @@ export default class ChannelHeader extends React.Component {
                             <th className='header-list__members'>
                                 {popoverListMembers}
                             </th>
-                            <th className='search-bar__container'><NavbarSearchBox showMentionFlagBtns={false}/></th>
+                            <th className='search-bar__container'>
+                                <NavbarSearchBox
+                                    showMentionFlagBtns={false}
+                                    isFocus={Utils.isMobile()}
+                                />
+                            </th>
                             <th>
                                 <div className='dropdown channel-header__links search-btns'>
                                     <OverlayTrigger
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
 };
diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx
index 86d1bac1d..4c0105738 100644
--- a/webapp/components/search_results.jsx
+++ b/webapp/components/search_results.jsx
@@ -171,7 +171,7 @@ export default class SearchResults extends React.Component {
         var currentId = UserStore.getCurrentId();
         var searchForm = null;
         if (currentId) {
-            searchForm = <SearchBox/>;
+            searchForm = <SearchBox isFocus={Utils.isMobile()}/>;
         }
         var noResults = (!results || !results.order || !results.order.length);
         const searchTerm = this.state.searchTerm;
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index bdc285300..b792ad31a 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -51,7 +51,7 @@
     top: 15px;
 }
 
-.sidebar__clear-icon {
+.sidebar__search-clear {
     @include opacity(.5);
     color: $dark-gray;
     width: 40px;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index ee26045ac..37c91846e 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -933,7 +933,7 @@
             .icon--refresh {
                 @include opacity(.6);
                 color: $black;
-                right: 33px;
+                right: 30px;
                 top: 15px;
             }
 
@@ -955,12 +955,19 @@
         @include single-transition(transform, .35s, ease);
         @include translate3d(290px, 0, 0);
         border: none;
-        display: block;
         width: 290px;
+        visibility: hidden;
+
+        &.visible {
+            display: block;
+            visibility: visible;
+        }
 
         &.move--left,
         &.webrtc--show {
             @include translate3d(0, 0, 0);
+            display: block;
+            visibility: visible;
         }
     }
 
@@ -1099,15 +1106,22 @@
             display: block;
         }
 
-        .sidebar__clear-icon {
+        .sidebar__search-clear {
             display: block;
+            top: 6px;
+            height: 30px;
+            width: 35px;
+            margin-right: 18px;
             &.visible {
                 visibility: visible;
             }
         }
 
-        .fa-times {
-            margin-left: 15px;
+        .sidebar__search-clear-x {
+            margin-left: 14px;
+            font-size: 22px;
+            font-weight: 700;
+            opacity: .7;
         }
 
         .sidebar--right__close {