1 files changed, 20 insertions, 33 deletions

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index bea722243..a7e9bfcac 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -111,9 +111,8 @@ export default class SearchBar extends React.Component {
     }
 
     handleUserFocus() {
-        $('.search-bar__container').addClass('focused');
-
         this.setState({focused: true});
+        $('.search-bar__container').addClass('focused');
     }
 
     performSearch(terms, isMentionSearch) {
@@ -193,19 +192,6 @@ export default class SearchBar extends React.Component {
             </Tooltip>
         );
 
-        const searchPopover = (
-            <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>
-        );
-
         const flaggedTooltip = (
             <Tooltip id='flaggedTooltip'>
                 <FormattedMessage
@@ -289,28 +275,29 @@ export default class SearchBar extends React.Component {
                     autoComplete='off'
                 >
                     <span className='fa fa-search sidebar__search-icon'/>
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY_SMALL}
+                    <SuggestionBox
+                        ref='search'
+                        className='form-control search-bar'
+                        placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
+                        value={this.state.searchTerm}
+                        onFocus={this.handleUserFocus}
+                        onBlur={this.handleUserBlur}
+                        onChange={this.handleChange}
+                        listComponent={SearchSuggestionList}
+                        providers={this.suggestionProviders}
+                        type='search'
+                    />
+                    {isSearching}
+                    <Popover
+                        id='searchbar-help-popup'
                         placement='bottom'
-                        overlay={searchPopover}
-                        trigger='focus'
-                        rootClose={true}
                         className={helpClass}
                     >
-                        <SuggestionBox
-                            ref='search'
-                            className='form-control search-bar'
-                            placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
-                            value={this.state.searchTerm}
-                            onFocus={this.handleUserFocus}
-                            onBlur={this.handleUserBlur}
-                            onChange={this.handleChange}
-                            listComponent={SearchSuggestionList}
-                            providers={this.suggestionProviders}
-                            type='search'
+                        <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>'
                         />
-                    </OverlayTrigger>
-                    {isSearching}
+                    </Popover>
                 </form>
 
                 {mentionBtn}