MM-14489 Making SuggestionList component render at bottom of input on…

… dialogs (mattermost#2235)

Given a bug found that `SuggestionList`s [will clip through the top of a modal body](https://pre-release.mattermost.com/core/pl/wafwh5fyytgauykxdyytsqa51a), this PR passes along the `listStyle` prop (as an optional prop) to make it render below the input (instead of above, which is the default behavior)

components/interactive_dialog/dialog_element.jsx

@@ -152,6 +152,7 @@ export default class DialogElement extends React.PureComponent {
                     helpText={helpTextContent}
                     placeholder={placeholder}
                     value={this.state.value}
+                    listStyle={'bottom'}
                 />
             );
         }

components/interactive_dialog/interactive_dialog.jsx

@@ -151,7 +151,7 @@ export default class InteractiveDialog extends React.Component {
 
         return (
             <Modal
-                dialogClassName='about-modal'
+                dialogClassName='about-modal modal--overflow-visible'
                 show={this.state.show}
                 onHide={this.onHide}
                 onExited={this.props.onHide}

components/suggestion/suggestion_box.jsx

@@ -3,6 +3,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
@@ -170,6 +171,8 @@ export default class SuggestionBox extends React.Component {
             selection: '',
             allowDividers: true,
             presentationType: 'text',
+            dropdownPosition: 0,
+            inputWidth: 0,
         };
     }
 
@@ -266,8 +269,8 @@ export default class SuggestionBox extends React.Component {
             return;
         }
 
+        this.getDropdownPosition();
         this.setState({focused: true});
-
         if (this.props.openOnFocus || this.props.openWhenEmpty) {
             setTimeout(() => {
                 const textbox = this.getTextbox();
@@ -598,6 +601,13 @@ export default class SuggestionBox extends React.Component {
         this.container = container;
     };
 
+    getDropdownPosition = () => {
+        const input = ReactDOM.findDOMNode(this.refs.input);
+        const dropdownPosition = input.getBoundingClientRect().top;
+        const inputWidth = input.clientWidth;
+        this.setState({dropdownPosition, inputWidth});
+    }
+
     render() {
         const {
             listComponent,
@@ -661,6 +671,8 @@ export default class SuggestionBox extends React.Component {
                         terms={this.state.terms}
                         selection={this.state.selection}
                         components={this.state.components}
+                        dropdownPosition={this.state.dropdownPosition}
+                        inputWidth={this.state.inputWidth}
                     />
                 }
                 {(this.props.openWhenEmpty || this.props.value.length >= this.props.requiredCharacters) && this.state.presentationType === 'date' &&

components/suggestion/suggestion_list.jsx

@@ -24,6 +24,8 @@ export default class SuggestionList extends React.PureComponent {
         terms: PropTypes.array.isRequired,
         selection: PropTypes.string.isRequired,
         components: PropTypes.array.isRequired,
+        dropdownPosition: PropTypes.number,
+        inputWidth: PropTypes.number,
     };
 
     static defaultProps = {
@@ -161,8 +163,16 @@ export default class SuggestionList extends React.PureComponent {
         const mainClass = 'suggestion-list suggestion-list--' + this.props.location;
         const contentClass = 'suggestion-list__content suggestion-list__content--' + this.props.location;
 
+        let style = {};
+        if (this.props.dropdownPosition && this.props.location === 'bottom') {
+            style = {top: this.props.dropdownPosition + 5, width: this.props.inputWidth};
+        }
+
         return (
-            <div className={mainClass}>
+            <div
+                className={mainClass}
+                style={style}
+            >
                 <div
                     id='suggestionList'
                     ref='content'

components/widgets/settings/autocomplete_selector.jsx

@@ -18,6 +18,7 @@ export default class AutocompleteSelector extends React.PureComponent {
         helpText: PropTypes.node,
         placeholder: PropTypes.string,
         footer: PropTypes.node,
+        listStyle: PropTypes.string,
     };
 
     static defaultProps = {
@@ -79,6 +80,7 @@ export default class AutocompleteSelector extends React.PureComponent {
             helpText,
             inputClassName,
             value,
+            listStyle,
         } = this.props;
 
         const {focused} = this.state;
@@ -130,6 +132,7 @@ export default class AutocompleteSelector extends React.PureComponent {
                         openOnFocus={true}
                         openWhenEmpty={true}
                         replaceAllInputOnSelect={true}
+                        listStyle={listStyle}
                     />
                     {helpTextContent}
                     {footer}

sass/components/_select.scss

@@ -1,7 +1,7 @@
 @charset 'UTF-8';
 
 .select-suggestion-container {
-    position: relative;
+    position: static;
     margin: 8px 8px 0 0;
 
     &:hover {
@@ -19,9 +19,8 @@
         text-rendering: auto;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        top: 8px;
+        bottom: 22px;
         position: absolute;
-        right: 1rem;
         opacity: .4;
         font-size: 16px;
         pointer-events: none;

sass/components/_suggestion-list.scss

@@ -4,6 +4,7 @@
     @extend %popover-box-shadow;
     width: 100%;
     z-index: 100;
+    position: absolute;
 
     .suggestion-list__item {
         &:hover {
@@ -26,12 +27,10 @@
 
 .suggestion-list--top {
     bottom: 100%;
-    position: absolute;
 }
 
 .suggestion-list--bottom {
     height: 0;
-    position: relative;
 }
 
 .suggestion-list__content {
@@ -63,11 +62,11 @@
 }
 
 .suggestion-list__content--top {
-    bottom: 0;
+    bottom: -8px;
     position: absolute;
 }
 
-.suggestion-list--bottom {
+.suggestion-list__content--bottom {
     position: relative;
 }
 

sass/layout/_webhooks.scss

@@ -15,7 +15,7 @@
         }
     }
 
-    .form-control {
+    .form-control, .suggestion-list {
         width: 22rem;
     }
 }

sass/routes/_about-modal.scss

@@ -75,15 +75,31 @@
         .select-suggestion-container {
             margin: 0;
 
+            .suggestion-list--top {
+                height: 0;
+                bottom: initial;
+            }
+
+            .suggestion-list {
+                width: calc(100% - 50px);                
+
+                .suggestion-list__content--top {
+                    position: relative;
+                    bottom: initial;
+                    transform: translateY(calc(-100% - 36px));
+                }
+            }
+
             .form-control {
                 height: 36px;
                 padding: 8px 12px;
             }
 
             &:after {
-                top: 9px;
-                right: 12px;
+                left: calc(100% - 27px);
+                bottom: 27px;
                 font-size: 20px;
+                position: relative;
             }
         }