BModal: console error "Your focus-trap must have at least one container with at least one tabbable node in it at all times" #2862
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
Used Package Manager
pnpm