fix(combobox): modal focus issue (#21733)

gDINESH13 · heloiselui · tay1orjones · web-flow · commit c51ee167f9f7 · 2026-04-28T06:27:30.000Z
* fix(modal): scrolling issue

Signed-off-by: gDINESH13 &lt;dinesh13g@gmail.com&gt;

* fix(modal): focus fix

Signed-off-by: gDINESH13 &lt;dinesh13g@gmail.com&gt;

* test(modal): cover stable modal scroll during keyboard nav

---------

Signed-off-by: gDINESH13 &lt;dinesh13g@gmail.com&gt;
Co-authored-by: Heloise Lui &lt;71858203+heloiselui@users.noreply.github.com&gt;
Co-authored-by: Taylor Jones &lt;taylor.jones826@gmail.com&gt;
diff --git a/e2e/components/Modal/Modal-test.avt.e2e.js b/e2e/components/Modal/Modal-test.avt.e2e.js
@@ -115,4 +115,52 @@ test.describe('@avt Modal', () => {
     await page.keyboard.press('Tab');
     await expect(page.getByRole('button', { name: 'close' })).toBeFocused();
   });
+
+  test('@avt-keyboard-nav should only scrollIntoView interactive elements if necessary', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Modal',
+      id: 'components-modal--with-scrolling-content',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const primaryInput = page.getByRole('textbox', { name: 'Domain name' });
+    await expect(primaryInput).toBeFocused();
+
+    const modalContent = page.locator('.cds--modal-content');
+    await expect(modalContent).toHaveClass(/cds--modal-scroll-content/);
+
+    const isScrollable = await modalContent.evaluate(
+      (node) => node.scrollHeight > node.clientHeight
+    );
+    expect(isScrollable).toBe(true);
+
+    const initialScrollTop = await modalContent.evaluate(
+      (node) => node.scrollTop
+    );
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('combobox', { name: 'Region' })).toBeFocused();
+
+    // scrollIntoView should only run when needed, not on every tab stop.
+    const scrollTopAfterFirstTab = await modalContent.evaluate(
+      (node) => node.scrollTop
+    );
+    expect(scrollTopAfterFirstTab).toBe(initialScrollTop);
+
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('combobox', {
+        name: 'Permissions (Example of Floating UI)',
+      })
+    ).toBeFocused();
+
+    const scrollTopAfterSecondTab = await modalContent.evaluate(
+      (node) => node.scrollTop
+    );
+    expect(scrollTopAfterSecondTab).toBe(initialScrollTop);
+  });
 });
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -463,6 +463,18 @@ const ModalDialog = React.forwardRef(function ModalDialog(
       return;
     }
 
+    const modalRect = modalContent.getBoundingClientRect();
+    const elementRect = currentActiveNode.getBoundingClientRect();
+
+    // Check if element is fully visible within the modal viewport
+    const isFullyVisible =
+      elementRect.top >= modalRect.top &&
+      elementRect.bottom <= modalRect.bottom;
+
+    if (isFullyVisible) {
+      return; // Don't scroll if already fully visible
+    }
+
     currentActiveNode.scrollIntoView({ block: 'center' });
   }
 
