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

Copilot · 2025-09-29T16:42:41Z

Problem

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

Open two modals (one on top of another)
Disable all focusable elements in the first modal while the second is still open
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 || (typeof document !== 'undefined' ? document.body : 'body'),

This ensures that when the focus trap deactivates, it can always find a valid fallback element:

First priority: the intended fallback focus element (fallbackFocus.ref.value)
Client-side fallback: document.body
SSR-safe fallback: the string selector 'body'

The SSR check ensures the code works correctly in server-side rendering environments where document is undefined.

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:

After fix - No errors:

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

Fixes #2862

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 · 2025-09-29T16:42:45Z

Run & review this pull request in StackBlitz Codeflow.

Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>

github-actions · 2025-11-14T03:02:37Z

This PR is stale because it has been open for 45 days with no activity. It will not be auto-closed

packages/bootstrap-vue-next/src/composables/useActivatedFocusTrap.ts

Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>

coderabbitai · 2025-11-18T23:33:16Z

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-11-18T23:45:24Z

bsvn-vite-ts

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2864

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2864

commit: 44e3f14

* upstream/main: (28 commits) fix(BToggle)! Remove redundant attribute cleanup & update docs for accessibility attributes on show/hide components (bootstrap-vue-next#2918) chore: release main (bootstrap-vue-next#2912) fix: allow custom component props in orchestrator create methods with type safety (bootstrap-vue-next#2922) fix(BModal): prevent focus trap error when no tabbable elements exist (bootstrap-vue-next#2864) Update package description for clarity (bootstrap-vue-next#2917) Update project description for clarity and detail test: add event emission tests for BTable and BTableLite (bootstrap-vue-next#2915) fix(BTableLite): Use primary key to persist row-details state when items change (bootstrap-vue-next#2871) chore: release main (bootstrap-vue-next#2896) feat(BTable): add configurable debouncing ci: Add publint to the build process (bootstrap-vue-next#2909) docs(Offcanvas): Parity pass (bootstrap-vue-next#2900) fix(directives): Robustness fixes for directives (bootstrap-vue-next#2906) docs(BFormInput): document @wheel.prevent for disabling mousewheel events (bootstrap-vue-next#2903) fix(typings): Fix paths to `*.d.mts` files (bootstrap-vue-next#2907) feat: add name and form props to BFormRating for form submission (bootstrap-vue-next#2895) docs: refactor docs to avoid duplication and boilerplate code (bootstrap-vue-next#2891) docs(BToast): Parity (bootstrap-vue-next#2887) docs(BModal): fix attribute to hide footer (bootstrap-vue-next#2888) docs(BPlaceholder): Parity pass (bootstrap-vue-next#2886) ...

Initial plan

36cfa41

Copilot AI assigned Copilot and VividLemon Sep 29, 2025

Copilot started work on behalf of VividLemon September 29, 2025 16:42 View session

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

github-actions bot added the stale There has been no additional replies or questions and the thread is assumed closed label Nov 14, 2025

VividLemon reviewed Nov 18, 2025

View reviewed changes

packages/bootstrap-vue-next/src/composables/useActivatedFocusTrap.ts Outdated Show resolved Hide resolved

Copilot started work on behalf of VividLemon November 18, 2025 23:27 View session

fix: add SSR check for document.body in fallbackFocus

44e3f14

Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>

Copilot AI requested a review from VividLemon November 18, 2025 23:34

Copilot finished work on behalf of VividLemon November 18, 2025 23:34

VividLemon approved these changes Nov 18, 2025

View reviewed changes

VividLemon marked this pull request as ready for review November 18, 2025 23:42

github-actions bot removed the stale There has been no additional replies or questions and the thread is assumed closed label Nov 19, 2025

VividLemon merged commit d5d85f2 into main Nov 19, 2025
8 checks passed

github-actions bot mentioned this pull request Nov 19, 2025

chore: release main #2912

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

Uh oh!

Copilot AI commented Sep 29, 2025 •

edited

Loading

Uh oh!

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

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

Uh oh!

coderabbitai bot commented Nov 18, 2025 •

edited

Loading

Review skipped

Other AI code review bot(s) detected

Uh oh!

pkg-pr-new bot commented Nov 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

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

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

Uh oh!

Conversation

Copilot AI commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Root Cause

Solution

Testing

Screenshots

Steps to reproduce in the provided demo:

Workaround:

Reproduction

Used Package Manager

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

Uh oh!

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

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

Uh oh!

coderabbitai bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

pkg-pr-new bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Sep 29, 2025 •

edited

Loading

coderabbitai bot commented Nov 18, 2025 •

edited

Loading

pkg-pr-new bot commented Nov 18, 2025 •

edited

Loading