1 files changed, 20 insertions, 8 deletions

diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx
index 03c7b894c..03e14ec49 100644
--- a/web/react/components/search_autocomplete.jsx
+++ b/web/react/components/search_autocomplete.jsx
@@ -10,6 +10,7 @@ const patterns = new Map([
     ['channels', /\b(?:in|channel):\s*(\S*)$/i],
     ['users', /\bfrom:\s*(\S*)$/i]
 ]);
+const Popover = ReactBootstrap.Popover;
 
 export default class SearchAutocomplete extends React.Component {
     constructor(props) {
@@ -36,6 +37,11 @@ export default class SearchAutocomplete extends React.Component {
         $(document).on('click', this.handleDocumentClick);
     }
 
+    componentDidUpdate() {
+        $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content').perfectScrollbar();
+        $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content').css('max-height', $(window).height() - 200);
+    }
+
     componentWillUnmount() {
         $(document).off('click', this.handleDocumentClick);
     }
@@ -136,7 +142,10 @@ export default class SearchAutocomplete extends React.Component {
             let channels = ChannelStore.getAll();
 
             if (filter) {
-                channels = channels.filter((channel) => channel.name.startsWith(filter));
+                channels = channels.filter((channel) => channel.name.startsWith(filter) && channel.type !== 'D');
+            } else {
+                // don't show direct channels
+                channels = channels.filter((channel) => channel.type !== 'D');
             }
 
             channels.sort((a, b) => a.name.localeCompare(b.name));
@@ -193,7 +202,7 @@ export default class SearchAutocomplete extends React.Component {
 
         if (this.state.mode === 'channels') {
             suggestions = this.state.suggestions.map((channel, index) => {
-                let className = 'search-autocomplete__channel';
+                let className = 'search-autocomplete__item';
                 if (this.state.selection === index) {
                     className += ' selected';
                 }
@@ -211,7 +220,7 @@ export default class SearchAutocomplete extends React.Component {
             });
         } else if (this.state.mode === 'users') {
             suggestions = this.state.suggestions.map((user, index) => {
-                let className = 'search-autocomplete__user';
+                let className = 'search-autocomplete__item';
                 if (this.state.selection === index) {
                     className += ' selected';
                 }
@@ -224,7 +233,7 @@ export default class SearchAutocomplete extends React.Component {
                         className={className}
                     >
                         <img
-                            className='profile-img'
+                            className='profile-img rounded'
                             src={'/api/v1/users/' + user.id + '/image?time=' + user.update_at}
                         />
                         {user.username}
@@ -234,12 +243,15 @@ export default class SearchAutocomplete extends React.Component {
         }
 
         return (
-            <div
-                ref='container'
-                className='search-autocomplete'
+            <Popover
+                ref='searchPopover'
+                onShow={this.componentDidMount}
+                id='search-autocomplete__popover'
+                className='search-help-popover autocomplete visible'
+                placement='bottom'
             >
                 {suggestions}
-            </div>
+            </Popover>
         );
     }
 }