Fix dialog dropdown being cut-off (#30881)

* Fix dialog dropdown being cut-off

* Fix dropdown e2e tests

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/interactive_dialog/scrollable_spec.js

@@ -86,7 +86,7 @@ describe('Interactive Dialog', () => {
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}', {force: true});
                     cy.wrap($elForm).find('.form-control').type('{downarrow}'.repeat(10), {force: true});
-                    cy.wrap($elForm).find('.suggestion-list__item').should('not.exist');
+                    cy.wrap($elForm).find('.suggestion-list__item').first().should('not.be.visible');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}'.repeat(10), {force: true});
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                 } else if (index === 1) {
@@ -94,7 +94,7 @@ describe('Interactive Dialog', () => {
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}', {force: true});
                     cy.wrap($elForm).find('.form-control').type('{downarrow}'.repeat(10), {force: true});
-                    cy.wrap($elForm).find('.suggestion-list__item').should('not.exist');
+                    cy.wrap($elForm).find('.suggestion-list__item').first().should('not.be.visible');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}'.repeat(10), {force: true});
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                 }

webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx

@@ -205,6 +205,7 @@ export default class InteractiveDialog extends React.PureComponent<Props, State>
                 backdrop='static'
                 role='none'
                 aria-labelledby='interactiveDialogModalLabel'
+                style={{overflowY: 'hidden'}}
             >
                 <form
                     onSubmit={this.handleSubmit}

webapp/channels/src/components/suggestion/modal_suggestion_list.tsx

@@ -80,7 +80,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
     onModalScroll = (e: Event) => {
         const eventTarget = e.target as HTMLElement;
         if (this.state.scroll !== eventTarget.scrollTop &&
-            this.latestHeight !== 0) {
+            this.props.open) {
             this.setState({scroll: eventTarget.scrollTop});
         }
     };
@@ -132,7 +132,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
             return 0;
         }
 
-        const listElement = this.suggestionList?.current?.getContent()?.[0];
+        const listElement = this.suggestionList?.current?.getContent();
         if (!listElement) {
             return 0;
         }
@@ -180,7 +180,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
             return;
         }
 
-        const modalBodyContainer = this.container.current.closest('.modal-body');
+        const modalBodyContainer = this.container.current.closest('.modal-content');
         const modalBounds = modalBodyContainer?.getBoundingClientRect();
 
         if (modalBounds) {
@@ -200,11 +200,13 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
         let position = {};
         if (this.state.position === 'top') {
             position = {bottom: this.state.modalBounds.bottom - this.state.inputBounds.top};
+        } else {
+            position = {top: this.state.inputBounds.bottom - this.state.modalBounds.top};
         }
 
         return (
             <div
-                style={{position: 'absolute', zIndex: 101, width: this.state.inputBounds.width, ...position}}
+                style={{position: 'fixed', zIndex: 101, width: this.state.inputBounds.width, ...position}}
                 ref={this.container}
             >
                 <SuggestionList