Remove redundant mobile web search hint popover (#5233)

2 files changed, 29 insertions, 14 deletions

diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index 950e1406b..21e4ed919 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -335,7 +335,7 @@ export default class RhsThread extends React.Component {
         var currentId = UserStore.getCurrentId();
         var searchForm;
         if (currentId != null) {
-            searchForm = <SearchBox/>;
+            searchForm = <SearchBox isCommentsPage='true'/>;
         }
 
         let profile;
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index c5fcd4697..1ba58ea4c 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -37,6 +37,7 @@ export default class SearchBar extends React.Component {
 
         const state = this.getSearchTermStateFromStores();
         state.focused = false;
+        state.isPristine = true;
         this.state = state;
 
         this.suggestionProviders = [new SearchChannelProvider(), new SearchUserProvider()];
@@ -114,7 +115,10 @@ export default class SearchBar extends React.Component {
 
     performSearch(terms, isMentionSearch) {
         if (terms.length) {
-            this.setState({isSearching: true});
+            this.setState({
+                isSearching: true,
+                isPristine: false
+            });
 
             performSearch(
                 terms,
@@ -160,6 +164,25 @@ export default class SearchBar extends React.Component {
         }
     }
 
+    renderHintPopover(helpClass) {
+        if (!this.props.isCommentsPage && Utils.isMobile() && this.state.isPristine) {
+            return false;
+        }
+
+        return (
+            <Popover
+                id='searchbar-help-popup'
+                placement='bottom'
+                className={helpClass}
+            >
+                <FormattedHTMLMessage
+                    id='search_bar.usage'
+                    defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>'
+                />
+            </Popover>
+        );
+    }
+
     render() {
         const flagIcon = Constants.FLAG_ICON_SVG;
         var isSearching = null;
@@ -279,16 +302,7 @@ export default class SearchBar extends React.Component {
                         type='search'
                     />
                     {isSearching}
-                    <Popover
-                        id='searchbar-help-popup'
-                        placement='bottom'
-                        className={helpClass}
-                    >
-                        <FormattedHTMLMessage
-                            id='search_bar.usage'
-                            defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>'
-                        />
-                    </Popover>
+                    {this.renderHintPopover(helpClass)}
                 </form>
 
                 {mentionBtn}
@@ -303,5 +317,6 @@ SearchBar.defaultProps = {
 };
 
 SearchBar.propTypes = {
-    showMentionFlagBtns: React.PropTypes.bool
-};
\ No newline at end of file
+    showMentionFlagBtns: React.PropTypes.bool,
+    isCommentsPage: React.PropTypes.bool
+};