Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(dialog): toggle focus-trap on DOM connect and disconnect #11429

Merged
merged 2 commits into from
Feb 3, 2025
Merged

fix(dialog): toggle focus-trap on DOM connect and disconnect #11429

merged 2 commits into from
Feb 3, 2025

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Feb 1, 2025 •
edited
Loading

Related Issue: #10731

Summary

Fixes an issue where a focus-trap instance might be left active after the dialog is removed.

Relevant changes

  • Adds useFocusTrap controller
  • Extracts and exports function to create default focus-trap options

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Feb 1, 2025
@jcfranco jcfranco added the no changelog entry Use the commit override to avoid a changelog entry label Feb 1, 2025
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 1, 2025
@jcfranco jcfranco marked this pull request as ready for review February 1, 2025 09:00
@jcfranco
Copy link
Member Author

jcfranco commented Feb 2, 2025

I'll update modal and sheet separately as they'd be affected by this as well.

driskull
driskull approved these changes Feb 3, 2025
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 This is nice 💯 I like the triggerProp

packages/calcite-components/src/components/dialog/dialog.tsx
@@ -80,7 +70,21 @@ export class Dialog

private dragPosition: DialogDragPosition = { ...initialDragPosition };

focusTrap: FocusTrap;
focusTrap = useFocusTrap<Dialog>({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so react like in the naming 😊

@jcfranco jcfranco merged commit 5607902 into dev Feb 3, 2025
14 of 15 checks passed
@jcfranco jcfranco deleted the jcfranco/10371-ensure-focus-trap-is-toggled-on-connect-and-disconnect branch February 3, 2025 18:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@driskull driskull driskull approved these changes

@Elijbet Elijbet Awaiting requested review from Elijbet

@eriklharper eriklharper Awaiting requested review from eriklharper

Assignees

@jcfranco jcfranco

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. no changelog entry Use the commit override to avoid a changelog entry pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2025-02-06 - 3.0.0 Feb Breaking Chang...
Development

Successfully merging this pull request may close these issues.
2 participants
@jcfranco @driskull