feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape #9231
Conversation
github-actions
bot
added
the
enhancement
packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
Outdated
Show resolved
Hide resolved
Elijbet
changed the title
|
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
github-actions
bot
added
the
Stale
Elijbet
removed
the
Stale
|
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
github-actions
bot
added
the
Stale
github-actions
bot
removed
the
Stale
|
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
github-actions
bot
added
the
Stale
Elijbet
removed
the
Stale
|
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
…RetainingComponents when checking for activeElement
…is not itself focusable
Elijbet
removed
the
pr ready for visual snapshots
packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
Outdated
Show resolved
Hide resolved
| @@ -522,6 +529,22 @@ export class Popover | |||
| this.reposition(true); | |||
| }; | |||
|
|
|||
| private clickOutsideDeactivates = (event: MouseEvent): boolean => { | |||
There was a problem hiding this comment.
Can you confirm callbacks passed to connectFocusTrap options need to be this-bound?
There was a problem hiding this comment.
Confirmed. Fails tests without.
| await page.waitForChanges(); | ||
| expect(await inputPicker.getProperty("open")).toBe(true); | ||
|
|
||
| async function testEscapeAndCheckOpenState(elements: E2EElement[]) { |
There was a problem hiding this comment.
This is unresolved in the new test file.
packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
Outdated
Show resolved
Hide resolved
…ra open assert on stackedFocusTrap test
|
|
||
| const expectedElementId = | ||
| focusTrapOrderElements[i].id === "sheet" | ||
| ? "sheet-button" |
There was a problem hiding this comment.
This can be done in a follow-up refactor PR, but it'd be helpful to add a comment explaining why we check for sheet-button when sheet is the next element in the list.
Elijbet
added
the
pr ready for visual snapshots
* origin/dev: (230 commits) chore: release next chore(sort-handle): add messages (#10474) feat(accordion-item): stretch slotted actions to fill its height (#9250) chore: release next feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape (#9231) chore: remove commented-out code (#10478) chore: add cssrem VSCode extension recommendation (#10300) docs(accordion-item): fix deprecation tag (#10479) chore: release next feat(stepper-item): update component's active state background color. (#10475) refactor: use `requestAnimationFrame` to replace `readTask` (#10432) chore: release next fix(tip): fix rendering tied to named-slot content (#10470) ci: compile estimate totals per milestone (#10442) chore: release next fix(modal): fix rendering tied to named-slot content (#10469) chore: release next fix(shell-center-row): fix rendering tied to named-slot content (#10451) fix(inline-editable): fix rendering tied to default slot content (#10456) fix(input, input-number, input-text): should not set slotted actions to be disabled (#10458) ...
|
This is the gist of the test @DitwanP, @geospatialem. Whenever a focus-trapping component opens, it traps focus and gets added to the stack. Pressing escape should deactivate each returning focus to the next component in the stack. I recommend setting up a stack of all focus-trap components as open, mimicking the setup in the e2e, but have 2 separate stacks with popover containing either input-time-picker or input-date-picker, as you can't have both open at the same time. Click outside also needs to be tested. It's usually set to false. For input-date-picker and input-time-picker closing with click outside is delegated to popover: https://github.com/Esri/calcite-design-system/pull/9231/files#diff-42c23e5a429472ae2ecb636c2ba383162681d40c5ff70c3f89be55d376052e32R1002 So whatever the expected behavior for popover is in this case. |
Related Issue: #6456
Summary
Support component sequential closing with escape by having focus-trap handle the stacking order.