Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] v-slider unresponsive to changes via click on track #4464

Closed
racer01 opened this issue Jul 3, 2018 · 4 comments
Closed

[Bug Report] v-slider unresponsive to changes via click on track #4464

racer01 opened this issue Jul 3, 2018 · 4 comments
Assignees
Labels
platform specific The issue only occurs on a specific platform T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke
Milestone

Comments

@racer01
Copy link

racer01 commented Jul 3, 2018

Versions and Environment

Vuetify: 1.1.1
Last working version: 1.0.19
Vue: 2.5.16
Browsers: Firefox 60.0
OS: Windows 10

Steps to reproduce

Click on the grey and blue tracks a couple times back and forth to change v-slider's value.
I also tested in Chrome (67) and it works as expected.

Expected Behavior

Change slider value if I click anywhere inside input's boundaries.

Actual Behavior

If I click on the v-slider's track to change its value, sometimes it took me 2-3 clicks to change.

Reproduction Link

https://codepen.io/anon/pen/LraqRP

Other comments

I increased the track height on the second slider so it's easier to click on; also it is clear that this bug comes up only if I click on the track.

@KaelWD
Copy link
Member

KaelWD commented Jul 3, 2018

Can't reproduce, using FF 60 too. Increasing track height like that has no effect, the click target is an invisible <input> element.

@racer01
Copy link
Author

racer01 commented Jul 3, 2018

I successfully reproduced it on another machine in Firefox 60/61. I noticed that there are more events in Vue dev tools when changing slider value is successful.

vuetify-bug 4464

You are right, increasing height doesn't effect functionality; it is only unresponsive in the middle 2 pixels of the track.

I also modified the codepen to log mouse clicks and position, and when slider is not working the event handler isn't being called either.
The top slider is unresponsive every time if 89 <= clientY <= 91
and the bottom one if 141 <= clientY <= 143. It only changes on second click if I haven't moved my mouse cursor.
I recorded this bug in action: https://gfycat.com/TenderAppropriateAyeaye

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke platform specific The issue only occurs on a specific platform and removed S: need more info labels Jul 3, 2018
@KaelWD KaelWD added this to the v1.1.x milestone Jul 3, 2018
@racer01
Copy link
Author

racer01 commented Jul 3, 2018

It works as expected if I untick all of these 3 rules.
vuetify-bug 4464 2

@KaelWD KaelWD self-assigned this Jul 29, 2018
@KaelWD
Copy link
Member

KaelWD commented Jul 29, 2018

So firefox is well retarded: https://codepen.io/anon/pen/wxPxPp

Those rules are part of our CSS reset (#2848), and even overriding them back to initial doesn't change the slider back to its default style. Seems like just having them present will cause firefox to use a different style of slider that doesn't play nice with click events.
The slider does need refactoring to use proper native events instead of re-implementing the native behaviour, but I'm working around it for now by going back to a text input internally instead.

@lock lock bot locked as resolved and limited conversation to collaborators Jul 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
platform specific The issue only occurs on a specific platform T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke
Projects
None yet
Development

No branches or pull requests

2 participants