vuetify
vuetify copied to clipboard
[Bug Report][3.3.16] V-Snackbar block router action
Environment
Vuetify Version: 3.3.16 Last working version: 3.3.16 Vue Version: 3.3.4 Browsers: Firefox 117.0 OS: Linux x86_64
Steps to reproduce
Hi I have problem with V-Snackbar. When V-Snackbar is showing, all of vue router actions doesn't work. For example I can't use browser back and forward button or I can't use a button with router.go(-1) functionality. But after V-Snackbar timeout or I close it, everything is normal.
Expected Behavior
vue router work properly with V-Snackbar
Actual Behavior
V-Snackbar block vue-router
Reproduction Link
I'm having the same issue. The documentation mentions something about "persistent overlays will cancel navigation and animate as if they were clicked outside instead of closing." So I'm guessing that is somehow related. It makes the snackbar un-usable if you want to have working back and forward navigation buttons.
Just ran into this today. Initially, I considered it problematic, but on second thought, I'm not sure this is a bad thing:
If a user is about to hit "back" in their browser, and a snackbar pops up, they'll miss it. This keeps the user on the page until the message goes away, so they definitely won't miss it.
The only case this might be bad is if you have a snackbar with an indefinite timeout. Then they're stuck there until they close the snackbar, which may not be obvious.
back or next buttons of browser in our interface most of the time doesn't change website or interface, it change only router status and maybe a tab or something like that. But with this behavior of snackbar, users think all menu link (that work with vue router) doesn't work. Even if the user miss the message on pop up, miss behavior of the interface and menus is more important.
Ah, good point. If clicking a link also fails, that's probably no good.
Confirmed, I can still click navigation when a snackbar is displayed. I just can't use back/forward.
Just ran into this problem as well. For me this property on the snackbar fixed it: :close-on-back=false
. I'm not sure if there are any other side effects setting this property, but maybe it helps someone else.
VSnackbar: {
// please do not remove
closeOnBack: false
},
did the trick for me in my global config