search

epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.46k stars 338 forks source link

Scroll blocking on VaModal #4255

Open bagrovYKT opened 4 months ago

bagrovYKT commented 4 months ago

Vuestic-ui version: 1.9.9

Description

Im not sure that this is a bug, but if not, you should make an explanation of why is scroll blocking ramdomly apperas when VaModal closing. I used a simple triggering v-model value from true to false, tried to use $ref.modalref.hide() on @click.before, tried to close by default close icon, but still have this problem - sometimes scroll is blocking. Am i doing somethins wrong?

i forgot, there is an attentions in console [Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See

it's related to vuestic-ui/dist/web-components/src/utils/add-evnt-listener.js

Reproduction

make a VaModal, try to open and close it several times.

bagrovYKT commented 1 month ago

Hi there, have you tried to reproduct this strange behavior? If this is real issue, so scroll blocking is very major bug, because end-user have to reload page each time when the scroll is blocked and lost data on their forms, vuex, common data objects.

Edit: i've set :allowBodyScroll=true on all modals and problem was temporary solved.

m0ksem commented 1 month ago

Hi there, have you tried to reproduct this strange behavior? If this is real issue, so scroll blocking is very major bug, because end-user have to reload page each time when the scroll is blocked and lost data on their forms, vuex, common data objects.

Edit: i've set :allowBodyScroll=true on all modals and problem was temporary solved.

@bagrovYKT Hi. We're not able to reproduce it.

it's related to vuestic-ui/dist/web-components/src/utils/add-evnt-listener.js

Are you using web-components or vue build? Make sure your imports are correct if you're using vue build - sometimes autoimport can use wrong path.

If you have detailed reproduction, it will be helpful!

bagrovYKT commented 1 month ago

Hi there, have you tried to reproduct this strange behavior? If this is real issue, so scroll blocking is very major bug, because end-user have to reload page each time when the scroll is blocked and lost data on their forms, vuex, common data objects. Edit: i've set :allowBodyScroll=true on all modals and problem was temporary solved.

@bagrovYKT Hi. We're not able to reproduce it.

it's related to vuestic-ui/dist/web-components/src/utils/add-evnt-listener.js

Are you using web-components or vue build? Make sure your imports are correct if you're using vue build - sometimes autoimport can use wrong path.

If you have detailed reproduction, it will be helpful!

@m0ksem Hi! Thank you for reply, i found the root of the problem, and now im not shure that it's connected with VaModal. The way to reproduce this "Bug"(may be not a bug) is: create a <VaModal v-model="value" ref="modal">...some content...</VaModal> then call this modal via async method with callback with something like that: this.$refs.modal.hide() or this.value=!this.value

Async method will do some work and then runs cb method, that closes modal window, and it work perfectly(modal opens, and when work will be done the modal will close) , except stoppping/removing scroll-blocking event listener.