PLT-5179 - Fixing modal overflow for autocomplete (#5002)

* PLT-5179 - Fixing modal overflow for autocomplete

* PLT-5171 - Fixing search bar popover behaviour

5 files changed, 39 insertions, 53 deletions

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index a6fd379ac..a7e9bfcac 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -104,7 +104,6 @@ export default class SearchBar extends React.Component {
         SearchStore.storeSearchTerm(term);
         SearchStore.emitSearchTermChange(false);
         this.setState({searchTerm: term});
-        this.refs.searchOverlay.hide();
     }
 
     handleUserBlur() {
@@ -112,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) {
@@ -180,6 +178,11 @@ export default class SearchBar extends React.Component {
             isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
         }
 
+        let helpClass = 'search-help-popover';
+        if (!this.state.searchTerm && this.state.focused) {
+            helpClass += ' visible';
+        }
+
         const recentMentionsTooltip = (
             <Tooltip id='recentMentionsTooltip'>
                 <FormattedMessage
@@ -189,19 +192,6 @@ export default class SearchBar extends React.Component {
             </Tooltip>
         );
 
-        const searchPopover = (
-            <Popover
-                id='searchbar-help-popup'
-                placement='bottom'
-                className='search-help-popover'
-            >
-                <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
@@ -285,28 +275,29 @@ export default class SearchBar extends React.Component {
                     autoComplete='off'
                 >
                     <span className='fa fa-search sidebar__search-icon'/>
-                    <OverlayTrigger
-                        ref='searchOverlay'
-                        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='click'
-                        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}
diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index b3f9843c6..fb55b0588 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -64,6 +64,7 @@ export default class SuggestionBox extends React.Component {
             // Delay this slightly so that we don't clear the suggestions before we run click handlers on SuggestionList
             GlobalActions.emitClearSuggestions(this.suggestionId);
         }, 100);
+        this.props.onBlur();
     }
 
     handleChange(e) {
@@ -272,6 +273,7 @@ SuggestionBox.propTypes = {
     renderDividers: React.PropTypes.bool,
 
     // explicitly name any input event handlers we override and need to manually call
+    onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
     onKeyDown: React.PropTypes.func,
     onItemSelected: React.PropTypes.func
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 81c241986..ac2c3acd4 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -12,7 +12,6 @@
 
     .modal-body {
         max-height: calc(90vh - 62px);
-        overflow: auto;
         padding: 20px 15px;
     }
 
@@ -24,10 +23,6 @@
             min-height: 8em;
         }
 
-        .suggestion-list {
-            bottom: -149px;
-        }
-
         .suggestion-list__content {
             max-height: 150px;
         }
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 1f5ed7248..b4839bd1f 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -93,21 +93,20 @@
 }
 
 .search-help-popover {
+    @include single-transition(opacity, .3s, ease-in);
     font-size: em(13px);
-    max-width: 300px;
+    max-width: 350px;
+    top: 36px;
+    visibility: hidden;
     width: 100%;
 
-    &:not(.autocomplete) {
-        margin-top: 17px !important;
-    }
-
     &.autocomplete {
         display: block;
 
         .popover-content {
-            -webkit-overflow-scrolling: touch;
             padding: 10px;
             position: relative;
+            -webkit-overflow-scrolling: touch;
         }
     }
 
@@ -206,6 +205,11 @@
     .tooltip-inner {
         max-width: 100%;
     }
+
+    &.visible {
+        @include opacity(1);
+        visibility: visible;
+    }
 }
 
 .member-list__popover {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 8fcf2e94e..bd39f6af7 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -427,14 +427,8 @@
     }
 
     .search-help-popover {
-        left: 0 !important;
-        margin-left: 10px;
+        left: 55px;
         max-width: calc(100% - 80px);
-
-        .focused & {
-            left: 45px !important;
-            margin-top: 50px;
-        }
     }
 
     .modal-direct-channels,