bug(mat-slider): mobile device scrolling can break slider internal state
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
Contributor guide
Research direction
Reproduce the issue on an iOS Chrome page containing a mat-slider by starting a scroll with the pointerdown on the slider. Trace the slider's pointer-event handling and verify that, after scrolling stops without pointerup, the slider returns to an inactive state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100