`useFocusTrap`: `fallbackFocus` was specified but was not a node, or did not return a node

[susnux]

I see this sometimes in the browser dev tools but it also regularly (30% chance) breaks server frontend unit tests:

 Error: `fallbackFocus` was specified but was not a node, or did not return a node
 ❯ getNodeForOption ../../node_modules/focus-trap/dist/focus-trap.js:284:13
 ❯ updateTabbableNodes ../../node_modules/focus-trap/dist/focus-trap.js:410:46
 ❯ Object.activate ../../node_modules/focus-trap/dist/focus-trap.js:866:9
 ❯ useFocusTrap ../../node_modules/@nextcloud/vue/src/components/NcModal/NcModal.vue:384:1

This error originated in "apps/federatedfilesharing/src/services/dialogService.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

[nikhil2297]

I was able to reproduce and analyze this race condition. Here's what's happening

The error occur because useFocusTrap() is called from onMounted() before template refs are available:

• onMounted fires when the component is mounted
• But maskElement.value is still null at that point
• The focus trap code tries to use it as fallbackFocus and it throws an error

As we are already calling it from @after-enter

We should remove the call from the onMounted()

[susnux]

@nikhil2297 thank you for your analysis! Are you able to create a PR fixing it?

[nikhil2297]

@susnux I've just opened a PR for this! You can find the fix here: #8093. Let me know if any changes are needed.