Stepper (selectionChange) vs (selectionChanged) and [selectedIndex]
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### Bug, feature request, or proposal:
```
Next
Previous (cancelled)
```
In the stepper control the (selectionChange) event cannot be used together with [selectedIndex], because changing the [selectedIndex] also triggers (selectionChange), so there is no way of cancelling the selection programatically, or implement other logic 'before' the change is executed.
Expected it to work as a standard html select control where:
- when changing the .selectedIndex the (change) event doesn't get automatically triggered
- the (change) event is triggered 'before' the change is finished, so it can be cancelled with event.preventDefault()
#### What is the expected behaviour?
- The current event should be renamed (selectionChange**d**) = 'after' the step has changed.
- Emit a new event (selectionChange) = 'before' the step has changed, with option to cancel the action, which doesn't get automatically triggered when selectedIndex changes.
#### What is the current behavior?
selectionChange = 'after' the step has changed, naming is confusing, gets triggered automatically with [selectedIndex]
#### What are the steps to reproduce?

1. Select step 2
2. Press Previous button (the action is cancelled programatically) - ok
3. Press step 1 header (step 1 is still selected, the action cannot be cancelled, selectedIndex remains on step 2)
StackBlitz: https://stackblitz.com/edit/angular-material2-issue-9lskal
#### What is the use-case or motivation for changing an existing behavior?
Be able to programatically enable/disable certain steps
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 5.1.0
#### Is there anything else we should know?
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par reproduire le comportement dans le StackBlitz lié, en vous concentrant sur mat-horizontal-stepper, selectedIndex et selectionChange. Examinez en quoi la navigation de l’utilisateur diffère des modifications programmatiques de selectedIndex ; le travail est terminé lorsque la sémantique des événements est distincte, que l’action préalable à la modification peut être annulée et que la notification postérieure à la modification reste disponible.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100