[Bug]: Steps component is not showing correct selectedstep

[RasmusCCHobby]

Blazorise Version

2.0.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

<Steps SelectedStep="step2" NavigationAllowed="(ctx) => Task.FromResult(false)">
    <Step Name="step1">1</Step>
    <Step Name="step2">2</Step>
    <Step Name="step3">3</Step>
    <Step Name="step4">4</Step>
</Steps>

Steps to reproduce & bug description

We're using the steps component to show like steps in a process. So we just want the visuals of the steps and we don't want navigation.
But it seems with the newest version of Blazorise this now no longer works. If we remove the NavigationAllowed that just stops navigation entirely then it works fine.

What is expected?

We would like for step2 to be shown as selected.

What is actually happening?

Currently with the above example code it shows as if nothing is selected.

What browsers do you see the problem on?

Microsoft Edge

Any additional comments?

No response

[stsrki]

I suspect it is from one-way binding.

Can you try with @bind-SelectedStep="selectedStepName"?

<Steps @bind-SelectedStep="@selectedStepName">
    <Step Name="step1">1</Step>
    <Step Name="step2">2</Step>
    <Step Name="step3">3</Step>
    <Step Name="step4">4</Step>
</Steps>

@code {
    string selectedStepName = "step2";
}

[RasmusCCHobby]

Well yeah without NavigationAllowed="(ctx) => Task.FromResult(false)" it seems to work fine both with the bind- and without it.

I tried

<Steps @bind-SelectedStep="@selectedStepName["key"]" NavigationAllowed="(ctx) => Task.FromResult(false)">
    <Step Name="step1">1</Step>
    <Step Name="step2">2</Step>
    <Step Name="step3">3</Step>
    <Step Name="step4">4</Step>
</Steps>

@code {
    Dictionary<string, string> selectedStepName = new() { {"key", "step2"} } ;
}

And it didn't seem to work either.

Sorry for the weird situation here we have a case where we need to populate multiple of these dynamically from a data read.

[stsrki]

When you define it as NavigationAllowed="(ctx) => Task.FromResult(false)" it will not work because you are disabling it on every interaction.

You need to define your business logic in the NavigationAllowed callback, based on your application use case. So whenever you need to navigate, return true, and false when navigation needs to be disabled.

[RasmusCCHobby]

Right but here I'm not planning for it to be used for navigation at all. I'm displaying at which step an order is at in a process in a lookup tool. And with an order split in multiple packages I'm just trying to visualize it.

So for this to work in theory I would have to double render this once with a "packages fetched" variable set to false and then another time set to true which should then happen fast enough that the user doesn't mess with the steps?

I wanna make it really clear this value effectively never changes for this instance of the step component.

So I just don't wanna use it for navigation at all, I just wanna set the value once. It's just a real nice tool to visualize at which point a package is at.

This did work prior to the new version, I should say.

[stsrki]

It's ugly but it seems to work:

<Steps SelectedStep="@selectedStepName" NavigationAllowed="( ctx ) => Task.FromResult( allowNavigation )">
    <Step Name="step1">1</Step>
    <Step Name="step2">2</Step>
    <Step Name="step3">3</Step>
    <Step Name="step4">4</Step>
</Steps>

<Button Clicked="@(() => OnChangeStep( "step1" ))">
    Step 1
</Button>

<Button Clicked="@(() => OnChangeStep( "step2" ))">
    Step 2
</Button>

<Button Clicked="@(() => OnChangeStep( "step3" ))">
    Step 3
</Button>

<Button Clicked="@(() => OnChangeStep( "step4" ))">
    Step 4
</Button>

@code {
    string selectedStepName = "step1";
    bool allowNavigation = true;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        allowNavigation = false;
    }

    async Task OnChangeStep( string name )
    {
        allowNavigation = true;

        await InvokeAsync( StateHasChanged );
        await Task.Yield();

        selectedStepName = name;

        await InvokeAsync( StateHasChanged );
        await Task.Yield();
     
        allowNavigation = false;
    }
}