Fixed mobile search focus - keyboard collapse/focus (#5766)

webapp/components/rhs_thread.jsx

@@ -1,12 +1,10 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import SearchBox from './search_bar.jsx';
 import CreateComment from './create_comment.jsx';
 import RhsHeaderPost from './rhs_header_post.jsx';
 import RootPost from './rhs_root_post.jsx';
 import Comment from './rhs_comment.jsx';
-import FileUploadOverlay from './file_upload_overlay.jsx';
 import FloatingTimestamp from './post_view/components/floating_timestamp.jsx';
 import DateSeparator from './post_view/components/date_separator.jsx';
 
@@ -334,12 +332,6 @@ export default class RhsThread extends React.Component {
             );
         }
 
-        var currentId = UserStore.getCurrentId();
-        var searchForm;
-        if (currentId != null) {
-            searchForm = <SearchBox isCommentsPage={true}/>;
-        }
-
         let profile;
         if (UserStore.getCurrentId() === selected.user_id) {
             profile = this.props.currentUser;
@@ -407,9 +399,6 @@ export default class RhsThread extends React.Component {
         }
 
         return (
-            <div className='post-right__container'>
-                <FileUploadOverlay overlayType='right'/>
-                <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
             <div className='sidebar-right__body'>
                 <FloatingTimestamp
                     isScrolling={this.state.isScrolling}
@@ -467,7 +456,6 @@ export default class RhsThread extends React.Component {
                     </div>
                 </Scrollbars>
             </div>
-            </div>
         );
     }
 }

webapp/components/search_bar.jsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import SearchStore from 'stores/search_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -31,7 +30,9 @@ export default class SearchBar extends React.Component {
         this.handleUserFocus = this.handleUserFocus.bind(this);
         this.handleClear = this.handleClear.bind(this);
         this.handleUserBlur = this.handleUserBlur.bind(this);
-        this.performSearch = this.performSearch.bind(this);
+        this.handleSearch = this.handleSearch.bind(this);
+        this.handleSearchOnSuccess = this.handleSearchOnSuccess.bind(this);
+        this.handleSearchOnError = this.handleSearchOnError.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.searchMentions = this.searchMentions.bind(this);
         this.getFlagged = this.getFlagged.bind(this);
@@ -125,7 +126,7 @@ export default class SearchBar extends React.Component {
         this.setState({focused: true});
     }
 
-    performSearch(terms, isMentionSearch) {
+    handleSearch(terms, isMentionSearch) {
         if (terms.length) {
             this.setState({
                 isSearching: true,
@@ -136,23 +137,35 @@ export default class SearchBar extends React.Component {
                 terms,
                 isMentionSearch,
                 () => {
-                    this.setState({isSearching: false});
+                    this.handleSearchOnSuccess();
-
-                    if (Utils.isMobile() && this.search) {
-                        this.search.value = '';
-                    }
                 },
                 () => {
-                    this.setState({isSearching: false});
+                    this.handleSearchOnError();
                 }
             );
         }
     }
 
+    handleSearchOnSuccess() {
+        if (this.mounted) {
+            this.setState({isSearching: false});
+
+            if (Utils.isMobile() && this.search) {
+                this.search.value = '';
+            }
+        }
+    }
+
+    handleSearchOnError() {
+        if (this.mounted) {
+            this.setState({isSearching: false});
+        }
+    }
+
     handleSubmit(e) {
         e.preventDefault();
-        this.performSearch(this.state.searchTerm.trim());
+        this.handleSearch(this.state.searchTerm.trim());
-        $(this.search).find('input').blur();
+        this.search.blur();
     }
 
     searchMentions(e) {
@@ -310,7 +323,7 @@ export default class SearchBar extends React.Component {
                         listComponent={SearchSuggestionList}
                         providers={this.suggestionProviders}
                         type='search'
-                        autoFocus={this.props.isFocus}
+                        autoFocus={this.props.isFocus && this.state.searchTerm === ''}
                     />
                     <div
                         className={clearClass}

webapp/components/search_results.jsx

@@ -3,7 +3,6 @@
 
 import SearchResultsHeader from './search_results_header.jsx';
 import SearchResultsItem from './search_results_item.jsx';
-import SearchBox from './search_bar.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import SearchStore from 'stores/search_store.jsx';
@@ -168,11 +167,6 @@ export default class SearchResults extends React.Component {
 
     render() {
         var results = this.state.results;
-        var currentId = UserStore.getCurrentId();
-        var searchForm = null;
-        if (currentId) {
-            searchForm = <SearchBox isFocus={Utils.isMobile()}/>;
-        }
         var noResults = (!results || !results.order || !results.order.length);
         const searchTerm = this.state.searchTerm;
         const profiles = this.state.profiles || {};
@@ -312,8 +306,6 @@ export default class SearchResults extends React.Component {
         }
 
         return (
-            <div className='sidebar--right__content'>
-                <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
             <div className='sidebar-right__body'>
                 <SearchResultsHeader
                     isMentionSearch={this.props.isMentionSearch}
@@ -330,7 +322,6 @@ export default class SearchResults extends React.Component {
                     {ctls}
                 </div>
             </div>
-            </div>
         );
     }
 }

webapp/components/sidebar_right.jsx

@@ -5,6 +5,8 @@ import $ from 'jquery';
 
 import SearchResults from './search_results.jsx';
 import RhsThread from './rhs_thread.jsx';
+import SearchBox from './search_bar.jsx';
+import FileUploadOverlay from './file_upload_overlay.jsx';
 import SearchStore from 'stores/search_store.jsx';
 import PostStore from 'stores/post_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -188,8 +190,16 @@ export default class SidebarRight extends React.Component {
             expandedClass = 'sidebar--right--expanded';
         }
 
+        var currentId = UserStore.getCurrentId();
+        var searchForm = null;
+        if (currentId) {
+            searchForm = <SearchBox isFocus={this.state.searchVisible && Utils.isMobile()}/>;
+        }
+
         if (this.state.searchVisible) {
             content = (
+                <div className='sidebar--right__content'>
+                    <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
                     <SearchResults
                         isMentionSearch={this.state.isMentionSearch}
                         isFlaggedPosts={this.state.isFlaggedPosts}
@@ -199,9 +209,13 @@ export default class SidebarRight extends React.Component {
                         shrink={this.onShrink}
                         channelDisplayName={this.props.channel ? this.props.channel.display_name : ''}
                     />
+                </div>
             );
         } else if (this.state.postRightVisible) {
             content = (
+                <div className='post-right__container'>
+                    <FileUploadOverlay overlayType='right'/>
+                    <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
                     <RhsThread
                         fromFlaggedPosts={this.state.fromFlaggedPosts}
                         fromSearch={this.state.fromSearch}
@@ -212,6 +226,7 @@ export default class SidebarRight extends React.Component {
                         toggleSize={this.toggleSize}
                         shrink={this.onShrink}
                     />
+                </div>
             );
         }
 

webapp/components/suggestion/suggestion_box.jsx

@@ -25,6 +25,7 @@ export default class SuggestionBox extends React.Component {
         this.handleCompositionEnd = this.handleCompositionEnd.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handlePretextChanged = this.handlePretextChanged.bind(this);
+        this.blur = this.blur.bind(this);
 
         this.suggestionId = Utils.generateId();
         SuggestionStore.registerSuggestionBox(this.suggestionId);
@@ -189,6 +190,10 @@ export default class SuggestionBox extends React.Component {
         }
     }
 
+    blur() {
+        this.refs.textbox.blur();
+    }
+
     render() {
         const {
             type,