angular / angular/components

Linear stepper behaving weird when going back a step

オープン
#8,948 コメント 5 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: cdk/stepper G P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Bug, feature request, or proposal:
The stepper has weird styles when going back and leaving invalid steps, and it's inconsistent with the styles than when going back and leaving valid steps. It's also possible to have a combination of both where some labels will look disabled and some labels will look enabled when in fact they are all disabled.

#### What is the expected behavior?
On a stepper with 3 steps: A, B, C. If A, B and C are filled, valid and we are at C. When going back to B and making it invalid, it should mark C as disabled.
Then when going back to A and making it invalid too it should make B and C look disabled

#### What is the current behavior?
If B is made invalid, then A is made invalid too, B looks disabled but we can;t navigate there (because A is invalid), and C looks enabled even though we can't actually navigate there.

#### What are the steps to reproduce?
https://angular-qwtmdt.stackblitz.io

1. Fill requirements on Step 1.
2. Fill requirements on Step 2.
3. Fill requirements on Step 3.
4. Go back to Step 2 and erase a required field.
5. Go back to Step 1 and erase a required field.

![image](https://user-images.githubusercontent.com/2022649/33862933-1da747aa-de9a-11e7-8b4c-c81fa7e345d2.png)

#### What is the use-case or motivation for changing an existing behavior?
Behavior is inconsistent between steps 2 and 3. And Step 3 seems to promise that it's enabled when it's not, making the UI confusing.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされている StackBlitz の再現手順から始め、記載された手順に従って、ステップのラベルと実際のナビゲーションの利用可能性を比較します。Step 2、続いて Step 1 を無効化したときに、アクセスできない後続のステップがすべて一貫して無効状態のスタイルで表示されれば、作業は完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。