Skip to content

fix(BModal): prevent focus trap error when no tabbable elements exist #2864

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
Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

fix(BModal): prevent focus trap error when no tabbable elements exist #2864

wants to merge 2 commits into from
+35 −1

Conversation

Copy link
Contributor

Copilot AI commented Sep 29, 2025 •
edited
Loading

Problem

When using multiple BModal components in a stacked configuration, a console error would occur under specific conditions:

  1. Open two modals (one on top of another)
  2. Disable all focusable elements in the first modal while the second is still open
  3. Close the second modal

This would result in the error:

Uncaught (in promise) Error: Your focus-trap must have at least one container with at least one tabbable node in it at all times

The error occurred because when the second modal closed, the focus trap tried to return focus to the first modal, but it had no tabbable elements available.

Root Cause

In useActivatedFocusTrap.ts, the fallbackFocus option was being set to a static value at initialization time:

fallbackFocus: fallbackFocus.ref.value ?? undefined,

Since fallbackFocus.ref.value was null during initialization, the focus trap had no valid fallback element when attempting to deactivate.

Solution

Changed fallbackFocus from a static value to a dynamic function that resolves at runtime:

fallbackFocus: () => fallbackFocus.ref.value || document.body,

This ensures that when the focus trap deactivates, it can always find a valid fallback element - either the intended fallback focus element or document.body as a last resort.

Testing

  • ✅ All existing tests pass (1631 tests)
  • ✅ Added specific test case for focus trap deactivation scenario
  • ✅ Manually verified the reproduction case no longer throws errors
  • ✅ TypeScript compilation and linting pass

Screenshots

Before fix - Error scenario:
Initial test setup

After fix - No errors:
Fixed state

The fix is minimal and surgical, addressing only the specific edge case without affecting any existing functionality.

Closes #[issue_number]

Original prompt

This section details on the original issue you should resolve

<issue_title>BModal: console error "Your focus-trap must have at least one container with at least one tabbable node in it at all times"</issue_title>
<issue_description>### Describe the bug

Hello,
a console error is displayed when:

  • you open two modal windows (one on top of the other)
  • then you disable all focusable elements in the first modal window while the second is still open
  • and finally you close the second modal window (the focus tries to return to the first modal window, but without success)

Steps to reproduce in the provided demo:

  • click the "Open first modal" button
  • click the "Open second modal" button
  • click the "Save" button
  • open the browser console. The following error is displayed:
Uncaught (in promise) Error: Your focus-trap must have at least one container with at least one tabbable node in it at all times
    updateTabbableNodes2 https://githubhuqpsoqbwtu5vhkz-2ndo--5173--96435430.local-corp.webcontainer.io/node_modules/.vite/deps/bootstrap-vue-next.js?v=8f3640d9:2585
    value https://githubhuqpsoqbwtu5vhkz-2ndo--5173--96435430.local-corp.webcontainer.io/node_modules/.vite/deps/bootstrap-vue-next.js?v=8f3640d9:2990
    deactivateTrap https://githubhuqpsoqbwtu5vhkz-2ndo--5173--96435430.local-corp.webcontainer.io/node_modules/.vite/deps/bootstrap-vue-next.js?v=8f3640d9:2370
    deactivate https://githubhuqpsoqbwtu5vhkz-2ndo--5173--96435430.local-corp.webcontainer.io/node_modules/.vite/deps/bootstrap-vue-next.js?v=8f3640d9:2917
    deactivate https://githubhuqpsoqbwtu5vhkz-2ndo--5173--96435430.local-corp.webcontainer.io/node_modules/.vite/deps/bootstrap-vue-next.js?v=8f3640d9:3008
    useActivatedFocusTrap https://githubhuqpsoqbwtu5vhkz-2ndo--5173--96435430.local-corp.webcontainer.io/node_modules/.vite/deps/bootstrap-vue-next.js?v=8f3640d9:3106

Workaround:

You can add <div tabindex="0"></div> to the first modal, so there is always a focusable element. Quick and dirty, but it will make navigation by tab key a bit ugly.

Reproduction

https://stackblitz.com/edit/github-huqpsoqb-wtu5vhkz

Used Package Manager

pnpm</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #2862

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@bolt-new-by-stackblitz
Copy link

bolt-new-by-stackblitz bot commented Sep 29, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@VividLemon
fix(BModal): prevent focus trap error when no tabbable elements exist
33074d0 
Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>
Copilot AI changed the title [WIP] BModal: console error "Your focus-trap must have at least one container with at least one tabbable node in it at all times" fix(BModal): prevent focus trap error when no tabbable elements exist Sep 29, 2025
Copilot AI requested a review from VividLemon September 29, 2025 16:56
Copilot finished work on behalf of VividLemon September 29, 2025 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@VividLemon VividLemon Awaiting requested review from VividLemon

At least 1 approving review is required to merge this pull request.

Assignees

@VividLemon VividLemon

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

BModal: console error "Your focus-trap must have at least one container with at least one tabbable node in it at all times"

2 participants

@VividLemon