angular / angular/components

Linear stepper behaving weird when going back a step

Open
#8,948 5 comments 3 reactions 0 assignees View on GitHub
area: cdk/stepper G P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and follow the listed steps to compare the step labels with actual navigation availability. The work is done when invalidating Step 2 and then Step 1 makes every inaccessible later step display the disabled style consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.