angular / angular/components

bug(MatSlider): MatSliderThumb stays active after drag ending

Ouverte
#29,767 3 commentaires 4 réactions 0 personnes assignées Voir sur GitHub
area: material/slider P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

When you start dragging slider **MatSliderThumb** became active. Sometimes, it doesn't loose active state, when you ending dragging. It stays active even after click outside. Only way to 'release' it - drag it again.

Within this issue **dragStart** event is fired, but **dragEnd** not. Variable **_isActive** of MatSliderThumb stays true.
That leads to inconsistence of MatSliderThumb view (it looks as active all time) and **makes setting it's value programmatically impossible** (if you are trying to set Value from component).

Bug is not stable but can be easily reproduced at official doc examples.
Mostly occur, when dragging ends little lower than MatSliderThumb position.

https://github.com/user-attachments/assets/77b99e5e-5bb4-4a47-9442-d7a3fbd5e423

### Reproduction

StackBlitz link: https://stackblitz.com/edit/ikftbm?file=src%2Fexample%2Fslider-overview-example.html
Steps to reproduce:
1. Drag slider a little
2. Release on bottom side

### Expected Behavior

dragEnd should be fired each time when user actually ending it.

### Actual Behavior

Sometimes dragEnd event is not fired after actual dragging end.

### Environment

- Angular: 18
- CDK/Material: 18
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la gestion du glissement de MatSliderThumb présentée dans l’exemple StackBlitz lié, puis reproduisez l’échec en faisant légèrement glisser le curseur et en le relâchant sur le côté inférieur dans Chrome. Suivez les événements dragStart et dragEnd ainsi que l’état _isActive lors du relâchement du pointeur. C’est terminé lorsque dragEnd est déclenché pour chaque glissement terminé, que le thumb ne reste plus actif et que les changements de valeur programmatiques fonctionnent ensuite.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.