From 6fc60583eb7823e4b664f2de55d4fac7a63acc3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Wed, 28 May 2025 13:05:33 +0200
Subject: [PATCH] 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>
---
 .../channels/interactive_dialog/scrollable_spec.js     |  4 ++--
 .../interactive_dialog/interactive_dialog.tsx          |  1 +
 .../components/suggestion/modal_suggestion_list.tsx    | 10 ++++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/e2e-tests/cypress/tests/integration/channels/interactive_dialog/scrollable_spec.js b/e2e-tests/cypress/tests/integration/channels/interactive_dialog/scrollable_spec.js
index 3e14622a43..7fa398a51f 100644
--- a/e2e-tests/cypress/tests/integration/channels/interactive_dialog/scrollable_spec.js
+++ b/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');
                 }
diff --git a/webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx b/webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx
index 8915050a5b..3b294d0de4 100644
--- a/webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/suggestion/modal_suggestion_list.tsx b/webapp/channels/src/components/suggestion/modal_suggestion_list.tsx
index 195cbee765..33546a5382 100644
--- a/webapp/channels/src/components/suggestion/modal_suggestion_list.tsx
+++ b/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