Pressing stepper header and setting selectedIndex programmatically does not work correct

[FritzHerbers]

What is the expected behavior?

Pressing the header and setting selectedIndex programmatically should both be possible.

What is the current behavior?

Pressing the header and setting selectedIndex programmatically does not work correct.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-1ganxn?file=app%2Fstepper-overview-example.html

Reproduction steps within the Stackblitz example.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

See stackblitz dependencies.

Is there anything else we should know?

[jelbourn]

Confirmed that this is a real bug. Updated StackBlitz for v12:
https://stackblitz.com/edit/angular-1ganxn-uv1jta?file=material-module.ts

To summarize, after clicking a step, setting the selectedIndex to the first step does nothing.

[sahilmore-git]

Is this issue up for grabs? @jelbourn

[sahilmore-git]

fix(cdk/stepper/stepper.ts) : Pressing stepper header and setting selectedIndex programmatically does not work correct

Basically what happens here is that if we choose 3rd step from the tabs and again go and click on Button(selected index=0) it wont work because the value of selected index is already 0 hence it won't change the tabs too. So what I have done is simply reset the steps if we get same index after clicking the button. What this will do is it will allow us to re-select all the tabs again without any issue.
---------->Please check the solution here<------------

Fixes #15627

[sahilmore-git]

thoughts @jelbourn @josephperrott @andrewseguin @FritzHerbers ??

[viniciusschuelter]

Confirmed that this is a real bug. Updated StackBlitz for v12: https://stackblitz.com/edit/angular-1ganxn-uv1jta?file=material-module.ts

To summarize, after clicking a step, setting the selectedIndex to the first step does nothing.

Hey @jelbourn, im not sure if its really bug, i mean, i think that selectedIndex should be the same for the parent and the checkbox either. In this case, when i select any step the value wasnt update on parent(selectedIndex parent = 0, selectedIndex checkbox = 3), so when i try to select the step 0 the view understand that dosent was any change. This scenarious can be happen with any step depending the default value from selectedIndex from parent.
At first to solve this, I believe that the correct is to update the selectedIndex value through the output selectionChange :

(selectionChange)="selectedIndex = $event.selectedIndex"

Perhaps to facilitate this use, the ideal would be to implement a selectedIndexChange so that the selectedIndex is a twoBinding

[jelbourn]

@andrewseguin worth taking a quick look to see if this should be closed (and the behavior should be similar to tabs)

[shanksdev]

Hi everyone, I was looking for some good first issues and found this one.
I would say I agree with @viniciusschuelter. I took the liberty to fork the above mentioned stackblitz and gone through the above mentioned scenario, it seems that since the code was not updating the selectedIndex variable when user clicks on the stepper tab, hence it was not navigating to 0th index on click of the button as it was already 0. Once I updated the code to update the value of selectedIndex on selectionChange event and it started working.
Here is the forked and updated stackblitz for the same scenario working fine -
https://stackblitz.com/edit/angular-1ganxn-th3hb3?file=app%2Fstepper-overview-example.html,app%2Fstepper-overview-example.ts

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}