search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.73k stars 3.49k forks source link

setScrollPosition has some kind of side effect (random scroll) #8347

Closed vandelpavel closed 3 years ago

vandelpavel commented 3 years ago

Using setScrollPosition works great untill you try to use a dropdown button with mouse-over feat.

Fork my example project here: https://github.com/vandelpavel/Issue-classList.add-on-ssr.git PS: do not mind the repository name

To Reproduce Follow the instruction in the project: 1 Use the scroller 2 Hover the dropdown

Expected behavior Nothing should happen

Current behavior Random scroll over the button

Platform (please complete the following information): OS: Windows 10 Node:v12.16.3. NPM:6.14.4 Yarn:v1.22.5 Browsers: Chrome 87.0.4280.141

Additional context Probably is not directed to the dropdown behaviour and i found that if you loose the active/focus state of the component hovering the button the side effect wont happen.

vandelpavel commented 3 years ago

My current workaround allows me to use HTML DOM blur() method and make the activeElement loose it's focus status.

pdanpdan commented 3 years ago

Please make a codepen from your example so it can be tested.

vandelpavel commented 3 years ago

https://codepen.io/vandelpavel/pen/wvzZdrN

I can't manage to import setScrollPosition. How can i handle that on codepen?

pdanpdan commented 3 years ago

Quasar.utils.scroll.setScrollPosition

vandelpavel commented 3 years ago

Thank you :)

Updated!

pdanpdan commented 3 years ago

The reason: When the QMenu is closed it refocuses the element that was focused in page when it was opened (in this case it is the button that scrolled the page)

The fix: Focus the dropdown button first when you hover it. https://codepen.io/pdanpdan/pen/PoGgjEw?editors=1010

vandelpavel commented 3 years ago

Now i understand. My workaround so wasn't fixing the problem inside the project but only on the button used to scroll.

Could be a good idea to add a default hoverable prop feature that manage this behaviour or at least metion it inside the doc.

Maybe is a well know behaviour for experts but newer ones like me could fall in it.

Just my opinion is all up to you :)

Thanks again!