diff --git a/CHANGELOG.md b/CHANGELOG.md
index a941333fae..5928a9e0cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Fix bidirectional `FocusZone` to land focus correctly on DOWN key press after series of UP arrow keys @sophieH29 ([#1794](https://github.com/stardust-ui/react/pull/1794))
- Fix `hand` icon in Teams theme @lucivpav ([#1782](https://github.com/stardust-ui/react/pull/1782))
- Use `target` from `Provider` in `ReactDOM.createPortal()` calls @layershifter ([#1810](https://github.com/stardust-ui/react/pull/1810))
+- ESC key should close the last opened `Popup` or `Dialog` if body has focus @sophieH29 ([#1807](https://github.com/stardust-ui/react/pull/1807))
### Features
- Add `overwrite` prop to `Provider` @layershifter ([#1780](https://github.com/stardust-ui/react/pull/1780))
diff --git a/e2e/tests/dialogInDialog-test.ts b/e2e/tests/dialogInDialog-test.ts
index 6f9ae05b22..a47a55bd43 100644
--- a/e2e/tests/dialogInDialog-test.ts
+++ b/e2e/tests/dialogInDialog-test.ts
@@ -59,4 +59,31 @@ describe('Dialog in Dialog', () => {
expect(await e2e.exists(outerHeader)).toBe(false)
expect(await e2e.exists(innerHeader)).toBe(false)
})
+
+ it('A click on content and pressing ESC button should close the last opened dialog', async () => {
+ await e2e.clickOn(outerTrigger) // opens dialog
+ expect(await e2e.exists(outerHeader)).toBe(true)
+
+ await e2e.clickOn(innerTrigger) // opens nested dialog
+ expect(await e2e.exists(innerHeader)).toBe(true)
+
+ await e2e.clickOn(innerHeader)
+
+ // check that focus moved to body after clicking on Dialog content
+ expect(await e2e.isFocused('body')).toBe(true)
+
+ // press ESC and check if nested dialog is closed and focus is on nested trigger
+ await e2e.pressKey('Escape')
+ expect(await e2e.exists(innerHeader)).toBe(false)
+ expect(await e2e.isFocused(innerTrigger)).toBe(true)
+
+ // click on dialog content to move focus to body
+ await e2e.clickOn(outerHeader)
+ expect(await e2e.isFocused('body')).toBe(true)
+
+ // press ESC again and check if the last dialog is closed and focus is on trigger
+ await e2e.pressKey('Escape')
+ expect(await e2e.exists(outerHeader)).toBe(false)
+ expect(await e2e.isFocused(outerTrigger)).toBe(true)
+ })
})
diff --git a/e2e/tests/dialogInPopup-example.tsx b/e2e/tests/dialogInPopup-example.tsx
index 9426385c98..61b79348c5 100644
--- a/e2e/tests/dialogInPopup-example.tsx
+++ b/e2e/tests/dialogInPopup-example.tsx
@@ -6,18 +6,21 @@ export const selectors = {
dialogHeader: Dialog.slotClassNames.header,
dialogOverlay: Dialog.slotClassNames.overlay,
dialogTrigger: 'dialog-trigger',
- popupContent: Popup.Content.className,
+ popupContent: 'popup-content',
popupTrigger: 'popup-trigger',
}
const DialogInPopupExample = () => (