initialFocus did not return a node

[ramadanomar]

Description

While looking into #1737, i found that i occasionally receive Uncaught Error: initialFocus did not return a node while clicking the mobile filter button repeatedly. Could possibly be the reason of the tests failing

Reproduction

1. go to https://search-production.openverse.engineering/search/?q=cat
2. enter dev tools and select mobile (responsive mode)
3. you can also edit user agent if you want but it works on all that i tried (samsung,iphone,huawei)
4. spam the filter button with the console open until you see the error

Screenshots

Environment

I tried using both the development branch of chrome (Chrome dev) and firefox stable branch on ubuntu 20.04 lts. Tried a couple of UA but seems to be reproducible on any environment but only sometimes

Resolution

• 🙋 I would be interested in resolving this bug.

I'm looking into it right now, if you know what might be causing it lmk!

[obulat]

@ramadanomar, this is a known issue from the upstream dependencies, focus-trap-vue and focus-trap. The warning about initialFocus can be ignored, because Openverse uses its own, more flexible, implementation for managing focus while inside the modal, not the focus-trap one.
@sarayourfriend opened a PR in focus-trap-vue repository to fix this warning, which was merged, but only to the version that supports Vue 3.

I think the best way of fixing this warning, in the long run, is to use useFocusTrap from Vueuse: https://vueuse.org/integrations/usefocustrap/. I tried adding it, but there are some problems importing the hook in Nuxt 2 that I couldn't figure out.

[ramadanomar]

Then shouldn't we catch the error and prevent it from appearing in console?

[obulat]

Yes, it would be nice to catch it, @ramadanomar. I'm not sure where we can actually catch the focus-trap error, though.

[obulat]

Fixed in #1993