Should this early return be scoped to focus changes caused by clicking or tapping, or otherwise keep keyboard focused buttons scrollable into view? With the blanket button check here, if you tab to a button or [role="button"] inside a long modal body, focus can stay below the visible area under the fade.

Oh ur right, I din thought of keyboard navigation accessibility.

The issue is distinguishing between:

1. Click-initiated focus (button clicked → receives focus → shouldn't scroll)
2. Keyboard-initiated focus (Tab key → button receives focus → SHOULD scroll)

Unfortunately, by the time the focus event fires, we can't reliably determine what caused it (click vs keyboard). The FocusEvent doesn't provide this information.

The intention initially for this change was,

When the ComboBox clear button (X) was partially visible at the edge of the modal, clicking it would:

• Give the button focus
• Modal's focus handler would call scrollIntoView
• The scroll would happen during the click event
• The scroll interrupted the click, preventing the clear action
• User had to click again after scrolling to actually clear

The button check was meant to prevent this interruption by never scrolling buttons.
I will check if there are any better way to handle this.

I thought of adding a setTimeout

setTimeout(() => {
  currentActiveNode.scrollIntoView({ block: 'center' });
}, 10);

To defer the scroll until after the click event completes. Do you think this would be a better approach?

Using setTimeout does not seem ideal. Nothing about this issue suggests that it is timing related.

I have removed this entire button check of stopping the scrollintoview in modal. The combobox does clears its input with the current changes. When the element is completely into view. When combo-box is partially visibile like this, it scrolls the item into view before clearing first.

Do you think, this doesn't match the expected outcome?

How is the faded bottom area accounted for in this visibility check? ${prefix}--modal-scroll-content fades out the last part of the container, so an input can satisfy elementRect.bottom <= modalRect.bottom while still being visually obscured.

You are right again 🫡. The current visibility check doesn't account for the fade gradient. An element at the bottom edge can pass the check (elementRect.bottom <= modalRect.bottom) while being partially obscured by the fade.

I added this because even when combobox is completely visible like this,

Clicking the button triggers scroll, rather than showing dropdown options.

Do you think adding some fixed margin or boundary

const FADE_MARGIN = 48; // Adjust based on actual fade height

const isFullyVisible = 
  elementRect.top >= modalRect.top &&
  elementRect.bottom <= (modalRect.bottom - FADE_MARGIN);

This may not be the ideal way to handle this,
but this actually questions me back to the need of scroll into view,

for scenarios like this, where button cancel in combobox is partially visible

if I remove the button check you pointed above, it will scroll the element into view.

Can you point me how much of an element should be visible in the modal for it to avoid scrolling?

My initial thought is that the entire element should be visible, as scrolling would not be necessary if it is fully in view. However, there may be other considerations (e.g., accessibility) that could influence the display. I didn't find any specific guidance in https://carbondesignsystem.com/components/modal/accessibility/ or https://carbondesignsystem.com/components/modal/style/.

Hi Adam,
I tried to access the keyboard way of accessing the tabs below the visibility and the tabs which are not visible are actually scrolling into view even when (fade gradient ) is present.
So I guess it does handle elementRect.bottom <= modalRect.bottom those tabs at bottom.

Okay, sounds good. I was going to suggest a change like to the following to fully account for the faded area. However, if what you have works, I think that's fine.

diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index 9b978f5c75..1b5cf73047 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -463,13 +463,22 @@ const ModalDialog = React.forwardRef(function ModalDialog(
       return;
     }
 
+    const hasActiveScrollFade =
+      !modalContent.classList.contains(
+        `${prefix}--modal-scroll-content--no-fade`
+      ) && !modalContent.querySelector(`.${prefix}--autoalign`);
     const modalRect = modalContent.getBoundingClientRect();
+    /** Corresponds to the bottom fade distance in `_modal.scss`. */
+    const modalScrollFadeHeight = 80;
+    const visibleModalBottom = hasActiveScrollFade
+      ? modalRect.bottom - modalScrollFadeHeight
+      : modalRect.bottom;
     const elementRect = currentActiveNode.getBoundingClientRect();
 
     // Check if element is fully visible within the modal viewport
     const isFullyVisible =
       elementRect.top >= modalRect.top &&
-      elementRect.bottom <= modalRect.bottom;
+      elementRect.bottom <= visibleModalBottom;
 
     if (isFullyVisible) {
       return; // Don't scroll if already fully visible

Yea thanks I kind of thought that too, if it din worked that was my next step.

Okay, sounds good. I was going to suggest a change like to the following to fully account for the faded area. However, if what you have works, I think that's fine.

diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index 9b978f5c75..1b5cf73047 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -463,13 +463,22 @@ const ModalDialog = React.forwardRef(function ModalDialog(
       return;
     }
 
+    const hasActiveScrollFade =
+      !modalContent.classList.contains(
+        `${prefix}--modal-scroll-content--no-fade`
+      ) && !modalContent.querySelector(`.${prefix}--autoalign`);
     const modalRect = modalContent.getBoundingClientRect();
+    /** Corresponds to the bottom fade distance in `_modal.scss`. */
+    const modalScrollFadeHeight = 80;
+    const visibleModalBottom = hasActiveScrollFade
+      ? modalRect.bottom - modalScrollFadeHeight
+      : modalRect.bottom;
     const elementRect = currentActiveNode.getBoundingClientRect();
 
     // Check if element is fully visible within the modal viewport
     const isFullyVisible =
       elementRect.top >= modalRect.top &&
-      elementRect.bottom <= modalRect.bottom;
+      elementRect.bottom <= visibleModalBottom;
 
     if (isFullyVisible) {
       return; // Don't scroll if already fully visible