This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 55
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(Popup|Dialog): ESC should close opened Popup/Dialog if focus is l…
…ost and moved to body (#1807) * fix: ESC should close opened Popup/Dialog if focus is lost and moved to body * Add e2e test for popup * fix for nested Dialogs * add test for nested dialogs * add test case fo dialog in popup * update changelog * improvements after CR comments * Update packages/react/src/components/Dialog/Dialog.tsx * small improvement to trigger build
- Loading branch information
Showing
8 changed files
with
161 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import * as React from 'react' | ||
import { Button, Popup } from '@stardust-ui/react' | ||
|
||
export const selectors = { | ||
popupContentId: 'popup-content-id', | ||
popupTriggerId: 'popup-trigger-id', | ||
popupContentNestedId: 'popup-content-nested-id', | ||
popupTriggerNestedId: 'popup-trigger-nested-id', | ||
} | ||
|
||
const PopupInPopupExample = () => ( | ||
<Popup | ||
content={ | ||
<> | ||
<div id={selectors.popupContentId}>content</div> | ||
<Popup | ||
content={<div id={selectors.popupContentNestedId}>nested content</div>} | ||
trigger={<Button id={selectors.popupTriggerNestedId} content="Open a nested popup" />} | ||
/> | ||
</> | ||
} | ||
trigger={<Button id={selectors.popupTriggerId} content="Open a popup" />} | ||
/> | ||
) | ||
|
||
export default PopupInPopupExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { selectors } from './popupInPopup-example' | ||
|
||
const popupTrigger = `#${selectors.popupTriggerId}` | ||
const popupContent = `#${selectors.popupContentId}` | ||
const popupTriggerNested = `#${selectors.popupTriggerNestedId}` | ||
const popupContentNested = `#${selectors.popupContentNestedId}` | ||
|
||
describe('Popup in Popup', () => { | ||
beforeEach(async () => { | ||
await e2e.gotoTestCase(__filename, popupTrigger) | ||
}) | ||
|
||
it('A click on content and pressing ESC button should close the last opened popup', async () => { | ||
await e2e.clickOn(popupTrigger) // opens popup | ||
expect(await e2e.exists(popupContent)).toBe(true) | ||
|
||
await e2e.clickOn(popupTriggerNested) // opens nested popup | ||
expect(await e2e.exists(popupContentNested)).toBe(true) | ||
|
||
await e2e.clickOn(popupContentNested) | ||
|
||
// check that focus moved to body after clicking on Popup content | ||
expect(await e2e.isFocused('body')).toBe(true) | ||
|
||
// press ESC and check if nested popup is closed and focus is on nested trigger | ||
await e2e.pressKey('Escape') | ||
expect(await e2e.exists(popupContentNested)).toBe(false) | ||
expect(await e2e.isFocused(popupTriggerNested)).toBe(true) | ||
|
||
// click on popup content to move focus to body | ||
await e2e.clickOn(popupContent) | ||
expect(await e2e.isFocused('body')).toBe(true) | ||
|
||
// press ESC again and check if the last popup is closed and focus is on trigger | ||
await e2e.pressKey('Escape') | ||
expect(await e2e.exists(popupContent)).toBe(false) | ||
expect(await e2e.isFocused(popupTrigger)).toBe(true) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters