'how to stop vuetify v-bottom-sheet or (v-dialog) from blocking interaction with main content

We are trying to build an music playing interface on a Vue page that plays in a bottom player as described here: https://vuetifyjs.com/en/components/bottom-sheets/#music-player

But the playlist and other controls are in the main page. But the problem is that these elements get 'blocked' or deactivated or something, there is no way to interact with them. Just like in this example.

Input elements stop working and scrolling on the main page works only by grabbing the scrollbar on the side. @clicks are still registered, however, and scrolling on some other components work.

I think I have tried every API setting and combination in the docs, like attaching it to different dom elements, or hide-overlay, and persistent, but nothing seems to work. The same principle seems to apply to other dialogs that take focus in vuetify.

https://vuetifyjs.com/en/api/v-bottom-sheet/

Does anyone have experience with this or know a workaround for it? It would be greatly appreciated!

vue.jsdialogfrontendvuetify.jsbottom-sheet


Solution 1:[1]

This is intended behaviour. Your best bet is hide-overlay in combination with persistent

<v-bottom-sheet
  hide-overlay
  persistent
></v-bottom-sheet>

Solution 2:[2]

I face the same issue and solve that with the "retain-focus" property

try this <v-bottom-sheet :retain-focus="false"></v-bottom-sheet>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tauzN
Solution 2 jerryIsHere

Related Questions