Minor UI improvements (#4959)

* PLT-5128 - Fixing channel header responsively

* PLT-4984 - Fixing search popover behaviour

1 files changed, 31 insertions, 19 deletions

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index cfd9b0c73..bea722243 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -193,6 +193,19 @@ 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
@@ -276,29 +289,28 @@ export default class SearchBar extends React.Component {
                     autoComplete='off'
                 >
                     <span className='fa fa-search sidebar__search-icon'/>
-                    <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'
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY_SMALL}
                         placement='bottom'
+                        overlay={searchPopover}
+                        trigger='focus'
+                        rootClose={true}
                         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>'
+                        <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'
                         />
-                    </Popover>
+                    </OverlayTrigger>
+                    {isSearching}
                 </form>
 
                 {mentionBtn}