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.

Sign up for GitHub

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

Jump to bottom

bug(mat-slider): mobile device scrolling can break slider internal state #28130

Open
1 task
wagnermaciel opened this issue Nov 15, 2023 · 4 comments · May be fixed by #28739
Open
1 task

bug(mat-slider): mobile device scrolling can break slider internal state #28130

wagnermaciel opened this issue Nov 15, 2023 · 4 comments · May be fixed by #28739
Labels
Accessibility This issue is related to accessibility (a11y) android Issues specific to Android area: material/slider ios Issues specific to iOS P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@wagnermaciel
Copy link
Contributor

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Scrolling on a mobile device can break the mat-slider's internal state such that the slider still thinks it is in an active dragging state when it is not

The root cause of the issue is that for some reason, the pointerup event never gets triggered when the user stops scrolling

Reproduction

  • Visit any webpage that has a mat-slider
  • Scroll down with the pointerdown originating from the mat-slider
  • Stop scrolling

Expected Behavior

The mat-slider is in an inactive state

Actual Behavior

The mat-slider is still in the active state

Environment

  • Angular: 17
  • CDK/Material: 17
  • Browser(s): chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): ios
@wagnermaciel wagnermaciel added needs triage This issue needs to be triaged by the team area: material/slider ios Issues specific to iOS android Issues specific to Android P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Nov 15, 2023
@wagnermaciel
Copy link
Contributor Author

Current workaround for teams is to set touch-action: none on the mat-slider.

wagnermaciel added a commit to wagnermaciel/components that referenced this issue Nov 22, 2023
@wagnermaciel
fix(material/slider): end drag on pointer cancel
7e4a085 
* Fixes issue angular#28130
@wagnermaciel wagnermaciel mentioned this issue Nov 22, 2023
Closed
@wagnermaciel
Copy link
Contributor Author

Update:

#28176 does not fix the issue. There is a way to trigger pointercancel but continue dragging the input type="range"

Right now I believe change is the best (only?) event that indicates whether dragging has ended - not pointerup + pointercancel + pointerout + etc.

The problem I'm running into now is: When dragging, arrowing triggers a change event, which is indistinguishable from a change event triggered by pointerup. As far as I can tell, there are only 2 ways to solve for this:

  1. Diverge from the native input type="range" behavior and disable arrowing when the user is dragging
  2. Listen for pointerup and keydown events and store which one happens before a change event so we can determine whether the change was triggered by an arrow key or drag end.

@wagnermaciel
Copy link
Contributor Author

Update:

Listening for change events doesn't work because they are not guaranteed to be the last event that fires. If a user drags a slider thumb but then returns it to its original value, the change event will not fire since the value has not changed.

@zarend zarend added the Accessibility This issue is related to accessibility (a11y) label Feb 14, 2024
@wagnermaciel
Copy link
Contributor Author

I discussed this with the team and concluded that the small divergence of setting touch-action: none is ok.

wagnermaciel added a commit to wagnermaciel/components that referenced this issue Mar 18, 2024
@wagnermaciel
fix(material/slider): disable touch actions
cb0c819 
* Fixes angular#28130.
@wagnermaciel wagnermaciel linked a pull request Mar 18, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) android Issues specific to Android area: material/slider ios Issues specific to iOS P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/slider): disable touch actions wagnermaciel/components
2 participants
@zarend @wagnermaciel