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 = () => ( } - /> + <> +
Popup content
+ } + /> + } trigger={