Made Edit Post Modal autocomplete always attach to the bottom of the textarea (#4956)

webapp/components/channel_switch_modal.jsx

@@ -126,7 +126,7 @@ export default class SwitchChannelModal extends React.Component {
         const message = this.state.error;
         return (
             <Modal
-                className='modal-browse-channel'
+                dialogClassName='channel-switch-modal'
                 ref='modal'
                 show={this.props.show}
                 onHide={this.onHide}

webapp/components/edit_post_modal.jsx

@@ -259,6 +259,7 @@ export default class EditPostModal extends React.Component {
                                 channelId={this.state.channel_id}
                                 createMessage={Utils.localizeMessage('edit_post.editPost', 'Edit the post...')}
                                 supportsCommands={false}
+                                suggestionListStyle='bottom'
                                 id='edit_textbox'
                                 ref='editbox'
                             />

webapp/components/textbox.jsx

@@ -21,6 +21,24 @@ const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 import React from 'react';
 
 export default class Textbox extends React.Component {
+    static propTypes = {
+        id: React.PropTypes.string.isRequired,
+        channelId: React.PropTypes.string,
+        value: React.PropTypes.string.isRequired,
+        onChange: React.PropTypes.func.isRequired,
+        onKeyPress: React.PropTypes.func.isRequired,
+        createMessage: React.PropTypes.string.isRequired,
+        onKeyDown: React.PropTypes.func,
+        onBlur: React.PropTypes.func,
+        supportsCommands: React.PropTypes.bool.isRequired,
+        handlePostError: React.PropTypes.func,
+        suggestionListStyle: React.PropTypes.string
+    };
+
+    static defaultProps = {
+        supportsCommands: true
+    };
+
     constructor(props) {
         super(props);
 
@@ -242,6 +260,7 @@ export default class Textbox extends React.Component {
                     onHeightChange={this.handleHeightChange}
                     style={{visibility: this.state.preview ? 'hidden' : 'visible'}}
                     listComponent={SuggestionList}
+                    listStyle={this.props.suggestionListStyle}
                     providers={this.suggestionProviders}
                     channelId={this.props.channelId}
                     value={this.props.value}
@@ -272,20 +291,3 @@ export default class Textbox extends React.Component {
         );
     }
 }
-
-Textbox.defaultProps = {
-    supportsCommands: true
-};
-
-Textbox.propTypes = {
-    id: React.PropTypes.string.isRequired,
-    channelId: React.PropTypes.string,
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    onKeyPress: React.PropTypes.func.isRequired,
-    createMessage: React.PropTypes.string.isRequired,
-    onKeyDown: React.PropTypes.func,
-    onBlur: React.PropTypes.func,
-    supportsCommands: React.PropTypes.bool.isRequired,
-    handlePostError: React.PropTypes.func
-};

webapp/sass/components/_modal.scss

@@ -24,10 +24,6 @@
             min-height: 8em;
         }
 
-        .suggestion-list {
-            bottom: -149px;
-        }
-
         .suggestion-list__content {
             max-height: 150px;
         }
@@ -669,3 +665,9 @@
         padding-left: 0;
     }
 }
+
+.channel-switch-modal {
+    .modal-body {
+        overflow: visible;
+    }
+}

webapp/sass/components/_suggestion-list.scss

@@ -11,6 +11,11 @@
     bottom: 100%;
 }
 
+.suggestion-list--bottom {
+    position: relative;
+    height: 0;
+}
+
 .suggestion-list__content {
     background-color: $white;
     border: $border-gray;