angular / angular/components

Stepper (selectionChange) vs (selectionChanged) and [selectedIndex]

Offen
#9,733 30 Kommentare 29 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/stepper needs: discussion P3
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?
![screen shot 2018-02-01 at 12 54 07](https://user-images.githubusercontent.com/30979663/35677213-0fd83322-074f-11e8-9029-7c629ecc6c38.png)

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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.