From 816e8049b6429e5c91353323921a944fcf567403 Mon Sep 17 00:00:00 2001
From: Nathnael Dereje <natidere@amazon.de>
Date: Tue, 28 Apr 2026 18:28:47 +0200
Subject: [PATCH] fix: Listen to owner window on scroll, add more tests.

---
 pages/annotation-context/with-iframe.page.tsx | 45 ++++++++++++++++
 .../disabled-reason-iframe.page.tsx           | 17 ++++++
 .../button-dropdown/disabled-reason.page.tsx  | 12 ++++-
 pages/button/disabled-reason-iframe.page.tsx  | 17 ++++++
 pages/button/disabled-reason.page.tsx         | 48 ++++++++++-------
 pages/popover/with-iframe.page.tsx            | 52 ++++++++++++++++++
 pages/table/with-iframe.page.tsx              | 29 ++++++++--
 .../__integ__/with-iframe.test.ts             | 21 ++++++++
 .../button-dropdown-disabled-reason.test.ts   | 46 ++++++++++++++++
 .../__integ__/disabled-reason-iframe.test.ts  | 53 +++++++++++++++++++
 src/dropdown/internal.tsx                     | 25 +++++----
 src/internal/components/tooltip/index.tsx     |  6 ++-
 src/internal/utils/dom.ts                     |  4 ++
 src/table/__integ__/inline-editing.test.ts    | 18 +++++++
 src/table/body-cell/click-away.tsx            |  5 +-
 15 files changed, 359 insertions(+), 39 deletions(-)
 create mode 100644 pages/annotation-context/with-iframe.page.tsx
 create mode 100644 pages/button-dropdown/disabled-reason-iframe.page.tsx
 create mode 100644 pages/button/disabled-reason-iframe.page.tsx
 create mode 100644 pages/popover/with-iframe.page.tsx
 create mode 100644 src/annotation-context/__integ__/with-iframe.test.ts
 create mode 100644 src/button/__integ__/disabled-reason-iframe.test.ts

diff --git a/pages/annotation-context/with-iframe.page.tsx b/pages/annotation-context/with-iframe.page.tsx
new file mode 100644
index 0000000000..8e05336493
--- /dev/null
+++ b/pages/annotation-context/with-iframe.page.tsx
@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, SpaceBetween } from '~components';
+import AnnotationContext from '~components/annotation-context';
+import Hotspot from '~components/hotspot';
+
+import { annotationContextStrings } from '../onboarding/i18n';
+import tutorials from '../onboarding/tutorials';
+import { IframeWrapper } from '../utils/iframe-wrapper';
+
+const tutorial = tutorials(() => {})[0];
+
+function IframeContent() {
+  return (
+    <AnnotationContext
+      currentTutorial={tutorial}
+      i18nStrings={annotationContextStrings}
+      onStartTutorial={() => {}}
+      onExitTutorial={() => {}}
+    >
+      <Box padding="m">
+        <SpaceBetween size="l">
+          <div>
+            Hotspot 1: <Hotspot hotspotId={tutorial.tasks[0].steps[0].hotspotId} />
+          </div>
+          <div>
+            Hotspot 2: <Hotspot hotspotId={tutorial.tasks[0].steps[2].hotspotId} />
+          </div>
+        </SpaceBetween>
+      </Box>
+    </AnnotationContext>
+  );
+}
+
+export default function () {
+  return (
+    <Box margin="m">
+      <h1>Annotation context in iframe</h1>
+      <p>Click the hotspot icons — the annotation popover should appear inside the iframe.</p>
+      <IframeWrapper id="annotation-iframe" AppComponent={IframeContent} />
+    </Box>
+  );
+}
diff --git a/pages/button-dropdown/disabled-reason-iframe.page.tsx b/pages/button-dropdown/disabled-reason-iframe.page.tsx
new file mode 100644
index 0000000000..ff68fdcd7a
--- /dev/null
+++ b/pages/button-dropdown/disabled-reason-iframe.page.tsx
@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box } from '~components';
+
+import { IframeWrapper } from '../utils/iframe-wrapper';
+import { DisabledReasonDemo } from './disabled-reason.page';
+
+export default function () {
+  return (
+    <Box margin="m">
+      <h1>ButtonDropdown disabled reason in iframe</h1>
+      <IframeWrapper id="button-dropdown-iframe" AppComponent={DisabledReasonDemo} />
+    </Box>
+  );
+}
diff --git a/pages/button-dropdown/disabled-reason.page.tsx b/pages/button-dropdown/disabled-reason.page.tsx
index 82864fd812..4031380eba 100644
--- a/pages/button-dropdown/disabled-reason.page.tsx
+++ b/pages/button-dropdown/disabled-reason.page.tsx
@@ -133,11 +133,10 @@ export const selectableGroupItems: ButtonDropdownProps.Items = [
   { text: 'Action', id: 'action', disabled: false },
 ];
 
-export default function DescriptionPage() {
+export function DisabledReasonDemo() {
   const [isRightAligned, setIsRightAligned] = useState(false);
   return (
     <>
-      <h1>Descriptions in ButtonDropdown</h1>
       <label>
         <input
           type="checkbox"
@@ -184,3 +183,12 @@ export default function DescriptionPage() {
     </>
   );
 }
+
+export default function DescriptionPage() {
+  return (
+    <>
+      <h1>Descriptions in ButtonDropdown</h1>
+      <DisabledReasonDemo />
+    </>
+  );
+}
diff --git a/pages/button/disabled-reason-iframe.page.tsx b/pages/button/disabled-reason-iframe.page.tsx
new file mode 100644
index 0000000000..67edafcba6
--- /dev/null
+++ b/pages/button/disabled-reason-iframe.page.tsx
@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box } from '~components';
+
+import { IframeWrapper } from '../utils/iframe-wrapper';
+import { DisabledReasonDemo } from './disabled-reason.page';
+
+export default function () {
+  return (
+    <Box margin="m">
+      <h1>Button disabled reason in iframe</h1>
+      <IframeWrapper id="button-iframe" AppComponent={DisabledReasonDemo} />
+    </Box>
+  );
+}
diff --git a/pages/button/disabled-reason.page.tsx b/pages/button/disabled-reason.page.tsx
index b405c2a0c4..55dc65d385 100644
--- a/pages/button/disabled-reason.page.tsx
+++ b/pages/button/disabled-reason.page.tsx
@@ -8,31 +8,39 @@ import ScreenshotArea from '../utils/screenshot-area';
 
 import styles from './styles.scss';
 
+export function DisabledReasonDemo() {
+  return (
+    <>
+      <Button variant="primary" disabled={true} disabledReason="disabled reason">
+        Primary
+      </Button>
+      <Button disabled={true} disabledReason="disabled reason">
+        Default
+      </Button>
+      <Button
+        disabled={true}
+        disabledReason="disabled reason"
+        href="https://smth.com"
+        data-testid="normal-button-with-href"
+      >
+        Button with href
+      </Button>
+      <Button
+        disabled={true}
+        disabledReason="disabled reason"
+        iconName="star"
+        ariaLabel="Disabled reason icon button"
+      />
+    </>
+  );
+}
+
 export default function ButtonsScenario() {
   return (
     <article>
       <ScreenshotArea>
         <h1 className={styles.styledWrapper}>Buttons with disabled reason</h1>
-        <Button variant="primary" disabled={true} disabledReason="disabled reason">
-          Primary
-        </Button>
-        <Button disabled={true} disabledReason="disabled reason">
-          Default
-        </Button>
-        <Button
-          disabled={true}
-          disabledReason="disabled reason"
-          href="https://smth.com"
-          data-testid="normal-button-with-href"
-        >
-          Button with href
-        </Button>
-        <Button
-          disabled={true}
-          disabledReason="disabled reason"
-          iconName="star"
-          ariaLabel="Disabled reason icon button"
-        />
+        <DisabledReasonDemo />
       </ScreenshotArea>
     </article>
   );
diff --git a/pages/popover/with-iframe.page.tsx b/pages/popover/with-iframe.page.tsx
new file mode 100644
index 0000000000..bc0526aac7
--- /dev/null
+++ b/pages/popover/with-iframe.page.tsx
@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, Popover, SpaceBetween, StatusIndicator } from '~components';
+import Button from '~components/button';
+
+import { IframeWrapper } from '../utils/iframe-wrapper';
+
+function IframeContent() {
+  return (
+    <Box padding="m">
+      <SpaceBetween size="l">
+        <Popover
+          header="Popover in iframe"
+          content="This popover should render inside the iframe."
+          dismissAriaLabel="Close"
+          renderWithPortal={true}
+        >
+          <Button>With portal</Button>
+        </Popover>
+        <Popover
+          header="Popover in iframe"
+          content="This popover should render inside the iframe."
+          dismissAriaLabel="Close"
+          renderWithPortal={false}
+        >
+          <Button>Without portal</Button>
+        </Popover>
+        <Popover
+          position="top"
+          size="small"
+          content={<StatusIndicator type="success">Copied</StatusIndicator>}
+          dismissButton={false}
+          triggerType="custom"
+          renderWithPortal={true}
+        >
+          <Button iconName="copy">Copy</Button>
+        </Popover>
+      </SpaceBetween>
+    </Box>
+  );
+}
+
+export default function () {
+  return (
+    <Box margin="m">
+      <h1>Popover in iframe</h1>
+      <IframeWrapper id="popover-iframe" AppComponent={IframeContent} />
+    </Box>
+  );
+}
diff --git a/pages/table/with-iframe.page.tsx b/pages/table/with-iframe.page.tsx
index 2ece0349dc..3a778ceee2 100644
--- a/pages/table/with-iframe.page.tsx
+++ b/pages/table/with-iframe.page.tsx
@@ -6,7 +6,7 @@ import zipObject from 'lodash/zipObject';
 
 import { useCollection } from '@cloudscape-design/collection-hooks';
 
-import { Box, NonCancelableCustomEvent, SpaceBetween, Table, TableProps, TextFilter } from '~components';
+import { Box, Input, NonCancelableCustomEvent, SpaceBetween, Table, TableProps, TextFilter } from '~components';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import { IframeWrapper } from '../utils/iframe-wrapper';
@@ -21,6 +21,21 @@ type PageContext = React.Context<
 
 const allItems = generateItems(10);
 
+const editableColumnsConfig: typeof columnsConfig = [
+  ...columnsConfig,
+  {
+    id: 'type-edit',
+    header: 'Type (disabled edit)',
+    cell: item => item.type,
+    editConfig: {
+      editingCell: (item, { currentValue, setValue }) => (
+        <Input value={currentValue ?? item.type} onChange={event => setValue(event.detail.value)} />
+      ),
+      disabledReason: () => 'Editing is disabled in iframe test',
+    },
+  },
+];
+
 export default function () {
   const {
     urlParams: { iframe = true },
@@ -34,7 +49,7 @@ export default function () {
 }
 
 function DemoTable() {
-  const [columns, setColumns] = useState(columnsConfig);
+  const [columns, setColumns] = useState(editableColumnsConfig);
 
   function handleWidthChange(event: NonCancelableCustomEvent<TableProps.ColumnWidthsChangeDetail>) {
     const widths = zipObject(
@@ -67,13 +82,21 @@ function DemoTable() {
       <Table
         items={items}
         {...collectionProps}
-        ariaLabels={selectionLabels}
+        ariaLabels={{
+          ...selectionLabels,
+          activateEditLabel: (column, item) => `Edit ${item.id} ${column.header}`,
+          cancelEditLabel: column => `Cancel editing ${column.header}`,
+          submitEditLabel: column => `Submit edit ${column.header}`,
+          submittingEditText: () => 'Submitting',
+          successfulEditLabel: () => 'Edit successful',
+        }}
         stickyHeader={true}
         resizableColumns={true}
         enableKeyboardNavigation={true}
         selectionType="multi"
         columnDefinitions={columns}
         onColumnWidthsChange={handleWidthChange}
+        submitEdit={() => {}}
       />
     </SpaceBetween>
   );
diff --git a/src/annotation-context/__integ__/with-iframe.test.ts b/src/annotation-context/__integ__/with-iframe.test.ts
new file mode 100644
index 0000000000..15459b74ff
--- /dev/null
+++ b/src/annotation-context/__integ__/with-iframe.test.ts
@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+const wrapper = createWrapper();
+
+test(
+  'annotation popover is visible inside iframe',
+  useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/annotation-context/with-iframe');
+    await page.runInsideIframe('#annotation-iframe', true, async () => {
+      const annotationSelector = wrapper.findAnnotation().toSelector();
+      await page.waitForVisible(annotationSelector);
+      await expect(page.isDisplayed(annotationSelector)).resolves.toBe(true);
+    });
+  })
+);
diff --git a/src/button-dropdown/__integ__/button-dropdown-disabled-reason.test.ts b/src/button-dropdown/__integ__/button-dropdown-disabled-reason.test.ts
index 97a2a52935..a34664e9ce 100644
--- a/src/button-dropdown/__integ__/button-dropdown-disabled-reason.test.ts
+++ b/src/button-dropdown/__integ__/button-dropdown-disabled-reason.test.ts
@@ -166,3 +166,49 @@ const overlaps = (one: ElementRect, two: ElementRect) => {
 
   return true;
 };
+
+const setupIframeTest = (testFn: (page: ButtonDropdownDisabledReasonPage) => Promise<void>) => {
+  return useBrowser(async browser => {
+    const page = new ButtonDropdownDisabledReasonPage(browser);
+    await browser.url('#/light/button-dropdown/disabled-reason-iframe');
+    await page.runInsideIframe('#button-dropdown-iframe', true, async () => {
+      await page.waitForVisible(page.findButtonDropdown().toSelector());
+      await page.openDropdown();
+      await testFn(page);
+    });
+  });
+};
+
+describe('Button Dropdown - Disabled Reason in iframe', () => {
+  it(
+    'shows tooltip on hover',
+    setupIframeTest(async page => {
+      await page.hoverElement(page.findButtonDropdown().findItemById('connect').toSelector());
+      await page.waitForVisible(page.findDisabledReason().toSelector());
+      expect(await page.getDisabledReason()).toEqual('Instance must be running.');
+    })
+  );
+
+  it(
+    'closes on escape',
+    setupIframeTest(async page => {
+      await page.hoverElement(page.findButtonDropdown().findItemById('connect').toSelector());
+      await page.waitForVisible(page.findDisabledReason().toSelector());
+      await page.keys('Escape');
+      await page.waitForAssertion(async () =>
+        expect(await page.isDisplayed(page.findDisabledReason().toSelector())).toBeFalsy()
+      );
+    })
+  );
+
+  it(
+    'shows tooltip on nested disabled elements',
+    setupIframeTest(async page => {
+      await page.click(page.findButtonDropdown().findExpandableCategoryById('settings').toSelector());
+      await page.waitForVisible(page.findDisabledReason().toSelector());
+      expect(await page.getDisabledReason()).toEqual(
+        'Instance must be running and not already be attached to an Auto Scaling Group.'
+      );
+    })
+  );
+});
diff --git a/src/button/__integ__/disabled-reason-iframe.test.ts b/src/button/__integ__/disabled-reason-iframe.test.ts
new file mode 100644
index 0000000000..5f84daa976
--- /dev/null
+++ b/src/button/__integ__/disabled-reason-iframe.test.ts
@@ -0,0 +1,53 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+import tooltipStyles from '../../../lib/components/tooltip/test-classes/styles.selectors.js';
+
+const wrapper = createWrapper();
+const buttonSelector = wrapper.findButton('[data-testid="normal-button-with-href"]').toSelector();
+const tooltipSelector = `.${tooltipStyles.root}`;
+
+const setupTest = (testFn: (page: BasePageObject) => Promise<void>) => {
+  return useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/button/disabled-reason-iframe');
+    await page.runInsideIframe('#button-iframe', true, async () => {
+      await page.waitForVisible(buttonSelector);
+      await testFn(page);
+    });
+  });
+};
+
+describe('Button disabled reason in iframe', () => {
+  test(
+    'shows tooltip on hover',
+    setupTest(async page => {
+      await page.hoverElement(buttonSelector);
+      await page.waitForVisible(tooltipSelector);
+      await expect(page.getText(tooltipSelector)).resolves.toBe('disabled reason');
+    })
+  );
+
+  test(
+    'shows tooltip on focus',
+    setupTest(async page => {
+      await page.click('body');
+      await page.keys(['Tab']);
+      await page.waitForVisible(tooltipSelector);
+    })
+  );
+
+  test(
+    'dismisses tooltip on Escape',
+    setupTest(async page => {
+      await page.hoverElement(buttonSelector);
+      await page.waitForVisible(tooltipSelector);
+      await page.keys(['Escape']);
+      await page.waitForAssertion(async () => expect(await page.isExisting(tooltipSelector)).toBe(false));
+    })
+  );
+});
diff --git a/src/dropdown/internal.tsx b/src/dropdown/internal.tsx
index 8c496ac4d5..864a91574d 100644
--- a/src/dropdown/internal.tsx
+++ b/src/dropdown/internal.tsx
@@ -18,6 +18,7 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 import { useMobile } from '../internal/hooks/use-mobile';
 import { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { getOwnerWindow } from '../internal/utils/dom';
 import { nodeBelongs } from '../internal/utils/node-belongs';
 import { DropdownContextProvider, DropdownContextProviderProps } from './context';
 import {
@@ -420,16 +421,17 @@ const InternalDropdown = ({
 
     if (open) {
       // window may scroll when dropdown opens, for example when soft keyboard shows up
-      window.addEventListener('scroll', onDropdownOpen);
+      const targetWindow = getOwnerWindow(triggerRef.current);
+      targetWindow.addEventListener('scroll', onDropdownOpen);
       // only listen to window scroll within very short time after the dropdown opens
       // do not want to interfere dropdown position on scroll afterwards
       const timeoutId = setTimeout(() => {
-        window.removeEventListener('scroll', onDropdownOpen);
+        targetWindow.removeEventListener('scroll', onDropdownOpen);
       }, 500);
 
       return () => {
         clearTimeout(timeoutId);
-        window.removeEventListener('scroll', onDropdownOpen);
+        targetWindow.removeEventListener('scroll', onDropdownOpen);
       };
     }
     // See AWSUI-13040
@@ -454,10 +456,11 @@ const InternalDropdown = ({
         fireNonCancelableEvent(onOutsideClick);
       }
     };
-    window.addEventListener('click', clickListener, true);
+    const targetWindow = getOwnerWindow(triggerRef.current);
+    targetWindow.addEventListener('click', clickListener, true);
 
     return () => {
-      window.removeEventListener('click', clickListener, true);
+      targetWindow.removeEventListener('click', clickListener, true);
     };
   }, [open, onOutsideClick, triggerRef, externalTriggerRef]);
 
@@ -474,12 +477,13 @@ const InternalDropdown = ({
         fireNonCancelableEvent(onEscape);
       }
     };
-    window.addEventListener('keydown', keydownListener, true);
+    const targetWindow = getOwnerWindow(triggerRef.current);
+    targetWindow.addEventListener('keydown', keydownListener, true);
 
     return () => {
-      window.removeEventListener('keydown', keydownListener, true);
+      targetWindow.removeEventListener('keydown', keydownListener, true);
     };
-  }, [open, onEscape]);
+  }, [open, onEscape, triggerRef]);
 
   // sync dropdown position on scroll and resize
   useLayoutEffect(() => {
@@ -500,8 +504,9 @@ const InternalDropdown = ({
     updateDropdownPosition();
 
     const controller = new AbortController();
-    window.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });
-    window.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });
+    const targetWindow = getOwnerWindow(triggerRef.current);
+    targetWindow.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });
+    targetWindow.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });
     return () => {
       controller.abort();
     };
diff --git a/src/internal/components/tooltip/index.tsx b/src/internal/components/tooltip/index.tsx
index 048d832cd1..5d845b4cba 100644
--- a/src/internal/components/tooltip/index.tsx
+++ b/src/internal/components/tooltip/index.tsx
@@ -8,6 +8,7 @@ import PopoverArrow from '../../../popover/arrow';
 import PopoverBody from '../../../popover/body';
 import PopoverContainer from '../../../popover/container';
 import { PopoverProps } from '../../../popover/interfaces';
+import { getOwnerWindow } from '../../utils/dom';
 import { Transition } from '../transition';
 
 import testUtilsStyles from '../../../tooltip/test-classes/styles.css.js';
@@ -46,8 +47,9 @@ export default function Tooltip({
   }
 
   useEffect(() => {
+    const targetWindow = getOwnerWindow(trackRef.current);
     const controller = new AbortController();
-    window.addEventListener(
+    targetWindow.addEventListener(
       'keydown',
       (event: KeyboardEvent) => {
         if (event.key === 'Escape') {
@@ -67,7 +69,7 @@ export default function Tooltip({
     return () => {
       controller.abort();
     };
-  }, [onDismiss]);
+  }, [trackRef, onDismiss]);
 
   return (
     <Portal>
diff --git a/src/internal/utils/dom.ts b/src/internal/utils/dom.ts
index ebfcba4a44..93e547b6af 100644
--- a/src/internal/utils/dom.ts
+++ b/src/internal/utils/dom.ts
@@ -103,3 +103,7 @@ export function isSVGElement(target: unknown): target is SVGElement {
 export function isElement(target: unknown): target is Element {
   return isHTMLElement(target) || isSVGElement(target);
 }
+
+export function getOwnerWindow(element: HTMLElement | SVGElement | null | undefined): Window {
+  return element?.ownerDocument?.defaultView ?? window;
+}
diff --git a/src/table/__integ__/inline-editing.test.ts b/src/table/__integ__/inline-editing.test.ts
index 55528d5e69..0bafd1aed4 100644
--- a/src/table/__integ__/inline-editing.test.ts
+++ b/src/table/__integ__/inline-editing.test.ts
@@ -231,3 +231,21 @@ describe.each([false, true])('enableKeyboardNavigation=%s', enableKeyboardNaviga
     })
   );
 });
+
+test(
+  'disabled reason is displayed inside iframe',
+  useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await page.setWindowSize({ width: 1200, height: 800 });
+    await browser.url('#/light/table/with-iframe');
+    await page.runInsideIframe('#inner-iframe', true, async () => {
+      await page.waitForVisible(tableWrapper.toSelector());
+      // Click on the disabled-edit "Type (disabled edit)" column in the first row
+      // Column index 7: 1=checkbox, 2=id, 3=type, 4=dnsName, 5=imageId, 6=state, 7=type-edit
+      await page.click(tableWrapper.findBodyCell(1, 7).toSelector());
+      await page.waitForAssertion(() =>
+        expect(page.getText(liveRegion$)).resolves.toContain('Editing is disabled in iframe test')
+      );
+    });
+  })
+);
diff --git a/src/table/body-cell/click-away.tsx b/src/table/body-cell/click-away.tsx
index 7f44dd7a45..16c7d307d1 100644
--- a/src/table/body-cell/click-away.tsx
+++ b/src/table/body-cell/click-away.tsx
@@ -18,8 +18,9 @@ export function useClickAway(onClick: () => void) {
     // contains returns wrong result if the next render would remove the element
     // but capture phase happens before the render, so returns correct result
     // Ref: https://github.com/facebook/react/issues/20325
-    document.addEventListener('click', handleClick, { capture: true });
-    return () => document.removeEventListener('click', handleClick, { capture: true });
+    const ownerDocument = awayRef.current?.ownerDocument ?? document;
+    ownerDocument.addEventListener('click', handleClick, { capture: true });
+    return () => ownerDocument.removeEventListener('click', handleClick, { capture: true });
   }, [onClickStable]);
   return awayRef;
 }