feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape #9231
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 |
|---|---|---|
|
|
@@ -11,6 +11,12 @@ export interface FocusTrapComponent { | |
| */ | ||
| el: HTMLElement; | ||
|
|
||
| /** When `true`, disables the default close on escape behavior. */ | ||
driskull marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| escapeDisabled?: boolean; | ||
|
|
||
| /** When `true`, disables the closing of the component when clicked outside. */ | ||
| outsideCloseDisabled?: boolean; | ||
|
|
||
| /** | ||
| * When `true`, prevents focus trapping. | ||
| */ | ||
|
|
@@ -27,6 +33,11 @@ export interface FocusTrapComponent { | |
| * This should be implemented for components that allow user content and/or have conditionally-rendered focusable elements within the trap. | ||
| */ | ||
| updateFocusTrapElements?: () => Promise<void>; | ||
|
|
||
| /** | ||
| * Method that gets called when the focus trap is deactivated. | ||
| */ | ||
| onFocusTrapDeactivate?(): void; | ||
driskull marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| export type FocusTrap = _FocusTrap; | ||
|
|
@@ -58,9 +69,10 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec | |
| } | ||
|
|
||
| const focusTrapOptions: FocusTrapOptions = { | ||
Elijbet marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| clickOutsideDeactivates: !component.outsideCloseDisabled ?? true, | ||
| escapeDeactivates: !component.escapeDisabled ?? true, | ||
Elijbet marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. FIXME: I noticed one issue with us relying on There was a problem hiding this comment. hmm that's not good. It seems to have been that way from the beginning (first release) We could ask and see why its that way and if there is any chance of having a focusTrap option to not use capture events. There was a problem hiding this comment. I guess instead of using escapeDeactivates, we would have to handle closing the appropriate focus trap element in the trapStack Would have to look at our trapStack and call trap.deactivate() https://github.com/focus-trap/focus-trap?tab=readme-ov-file#trapdeactivate This means we would set There was a problem hiding this comment. We would need to setup an event listener on the document to listen for the escape key and close the top most focusTrap in the focusTrapStack. We could probably have a method in the To setup the event listener, we'll need to track how many active focus traps there are by having some trap count in There was a problem hiding this comment. Here's an example of what I'm thinking: diff --git forkSrcPrefix/packages/calcite-components/src/utils/focusTrapComponent.ts forkDstPrefix/packages/calcite-components/src/utils/focusTrapComponent.ts
index 877c3dc04f3329dd1355a30e8af3d888b3e96cf4..e88af0d7cdf6c530382888b3f8a02c5537bc6dd7 100644
--- forkSrcPrefix/packages/calcite-components/src/utils/focusTrapComponent.ts
+++ forkDstPrefix/packages/calcite-components/src/utils/focusTrapComponent.ts
@@ -2,6 +2,9 @@ import { createFocusTrap, FocusTrap as _FocusTrap, Options as FocusTrapOptions }
import { FocusableElement, focusElement, tabbableOptions } from "./dom";
import { focusTrapStack } from "./config";
+// i'm not sure if this needs to be a map of all documents. Would the keydown event bubble up out of shadow dom elements? If so, then the map isn't necessary.
+const focusTrapDocumentMap = new Map<Document, number>();
+
/**
* Defines interface for components with a focus trap. Focusable content is required for components implementing focus trapping with this interface.
*/
@@ -51,6 +54,7 @@ interface ConnectFocusTrapOptions {
*/
export function connectFocusTrap(component: FocusTrapComponent, options?: ConnectFocusTrapOptions): void {
const { el } = component;
+ const { ownerDocument } = el;
const focusTrapNode = options?.focusTrapEl || el;
if (!focusTrapNode) {
@@ -68,12 +72,28 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec
...options?.focusTrapOptions,
// the following options are not overridable
- document: el.ownerDocument,
+ document: ownerDocument,
tabbableOptions,
trapStack: focusTrapStack,
};
component.focusTrap = createFocusTrap(focusTrapNode, focusTrapOptions);
+ const newCount = (focusTrapDocumentMap.get(ownerDocument) || 0) + 1;
+ if (newCount === 1) {
+ addEscapeListener(ownerDocument);
+ }
+ focusTrapDocumentMap.set(ownerDocument, newCount);
+}
+
+// would need to call this on disconnect of all focus trap components.
+export function disconnectFocusTrap(component: FocusTrapComponent): void {
+ const { el } = component;
+ const { ownerDocument } = el;
+ const newCount = (focusTrapDocumentMap.get(ownerDocument) || 1) - 1;
+ if (newCount === 0) {
+ removeEscapeListener(ownerDocument);
+ }
+ focusTrapDocumentMap.set(ownerDocument, newCount);
}
/**
@@ -119,3 +139,17 @@ export function deactivateFocusTrap(
export function updateFocusTrapElements(component: FocusTrapComponent): void {
component.focusTrap?.updateContainerElements(component.el);
}
+
+function escapeHandler(event: KeyboardEvent): void {
+ if (event.key === "Escape") {
+ focusTrapStack[focusTrapStack.length - 1]?.deactivate(); // deactivate the last active focus trap. This might be the 0 index. I'm not sure.
+ }
+}
+
+function addEscapeListener(document: Document): void {
+ document.addEventListener("keydown", escapeHandler);
+}
+
+function removeEscapeListener(document: Document): void {
+ document.removeEventListener("keydown", escapeHandler);
+}This would let us handle the escape key and close the last active trap. |
||
| fallbackFocus: focusTrapNode, | ||
| onDeactivate: () => component.onFocusTrapDeactivate(), | ||
| setReturnFocus: (el) => { | ||
| focusElement(el as FocusableElement); | ||
| return false; | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.