nextcloud-libraries/nextcloud-vue

NcAppNavigation in mobile state blocks interacting with dialogs

Antreesy opened this issue · 4 comments

When it's in mobile state, focus trap is attached to toggle, and thus any open dialog would be inaccessible from keyboard (not saying that I couldn't type in TextField)

image

ncdialog-focustrap

Any known PR, where this regression could come from?

Originally posted by @Antreesy in #5335 (comment)

The issue is also impacting cospend app. It happens with width < 512px.
julien-nc/cospend-nc#248

When clicking on the textarea, the focus is attached to the logo link instead of the textarea when width < 512px.

width 511px:

2024-03-21_03-41-46-939_brave

width 512px:

2024-03-21_03-46-53-560_brave

Not sure if the app navigation is the problem, as the same issue happens on the sidebar

My assumption is that any mounted/visible element with focus trap may affect it

Yes see #5584 for the sidebar.

Another option would be to watch the style property of a component and when display: none is set (v-show: false) then remove the focus trap.