Stepper (selectionChange) vs (selectionChanged) and [selectedIndex]
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### 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?
Beitragsleitfaden
Rechercherichtung
Beginne damit, das Verhalten im verknüpften StackBlitz zu reproduzieren, wobei du dich auf mat-horizontal-stepper, selectedIndex und selectionChange konzentrierst. Verfolge, wie sich die Navigation durch den Benutzer von programmatischen Änderungen an selectedIndex unterscheidet; als abgeschlossen gilt die Aufgabe, wenn die Ereignissemantik unterschiedlich ist, die Aktion vor der Änderung abgebrochen werden kann und die Benachrichtigung nach der Änderung weiterhin verfügbar ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100