Skip to content

fix(UnlockModal): keep focus trapped when modal content changes - #664

Merged
ritaifeoluwa merged 1 commit into
SmartDropLabs:mainfrom
Enchanterme:fix/unlock-modal-dynamic-focus-trap
Oct 20, 2026
Merged

ritaifeoluwa merged 1 commit into
SmartDropLabs:mainfrom
Enchanterme:fix/unlock-modal-dynamic-focus-trap

Conversation

@Enchanterme

Copy link
Copy Markdown

Chakra's trapFocus catches focus that moves out of the dialog, but not focus that is lost when the focused element is unmounted (form swapped for the success view) or disabled (controls locking mid-transaction or when the lock period changes). The browser then drops focus to and the next Tab escapes the modal.

Add useDynamicFocusTrap, which observes the dialog's DOM and, when focus has been lost this way, moves it to the first tabbable element inside the dialog (or the dialog itself). Focus deliberately elsewhere, such as the nested TransactionConfirmModal, is left alone.

Closes #645
Closes #646
Closes #648
Closes #649

Chakra's trapFocus catches focus that moves out of the dialog, but not
focus that is lost when the focused element is unmounted (form swapped
for the success view) or disabled (controls locking mid-transaction or
when the lock period changes). The browser then drops focus to <body>
and the next Tab escapes the modal.

Add useDynamicFocusTrap, which observes the dialog's DOM and, when focus
has been lost this way, moves it to the first tabbable element inside the
dialog (or the dialog itself). Focus deliberately elsewhere, such as the
nested TransactionConfirmModal, is left alone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@drips-wave

drips-wave Bot commented Oct 19, 2026

Copy link
Copy Markdown

@Enchanterme Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@netlify

netlify Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for spiffy-melomakarona-eb1e8a failed.

Name Link
🔨 Latest commit ea29957
🔍 Latest deploy log https://app.netlify.com/projects/spiffy-melomakarona-eb1e8a/deploys/6ad56f48ef7ee09288d853e8

@netlify

netlify Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for smart-drop failed.

Name Link
🔨 Latest commit ea29957
🔍 Latest deploy log https://app.netlify.com/projects/smart-drop/deploys/6ad56f48849225dacdf99198

@ritaifeoluwa
ritaifeoluwa merged commit 0a5298e into SmartDropLabs:main Oct 20, 2026
0 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants