Hi Felix,

I apologize for my previous message not being accurate that the actual important part of the configuration is the Task.Delay. Let me provide a brief explanation below on why this is expected.

The example works correctly only when you add Task.Delay in the HandleValueChanged method because of the way Blazor handles state updates and component re-rendering.

• Blazor Rendering and State Updates: Blazor components re-render when their state changes. In your code, the "HandleValueChanged" method updates the "StepperValue" and modifies the "IsValidArray" values. Both changes would typically trigger a re-render of the TelerikStepper component.

• Immediate vs. Asynchronous Updates: Without "Task.Delay", all updates occur synchronously. When you set "StepperValue = index" and then immediately update the "IsValidArray" in the same method without awaiting an asynchronous operation, Blazor tries to batch the UI updates efficiently. This can result in the UI not updating as expected because Blazor may not recognize that a re-render is necessary immediately.

• Effect of Task.Delay: Adding "await Task.Delay(1);" introduces a small asynchronous delay that forces Blazor to pause, process pending UI updates, and then continue with the rest of the method. This effectively tells Blazor that it needs to perform a state update after the "StepperValue" change and before continuing with further changes to the "IsValidArray". This small delay allows Blazor to manage the DOM updates more predictably, ensuring the UI reflects the state changes correctly.

Regards,
Hristian Stefanov
Progress Telerik

Hi Felix,

Here is an improved version of the configuration where I added the @key parameter. Using @key ensures that each StepperStep is accurately tracked and updated based on its unique index, which also guarantees correct DOM updates.

<TelerikStepper Linear="true" Value="@StepperValue" ValueChanged="@HandleValueChanged">
    <StepperSteps>
        @for (int i = 0; i < IsValidArray.Length; i++)
        {
            <StepperStep Valid="@IsValidArray[i]" @key="@i"></StepperStep>
        }
    </StepperSteps>
</TelerikStepper>

@code {
    private int StepperValue { get; set; } = 0;

    bool?[] IsValidArray = new bool?[] { null, null, null, null };

    public async Task HandleValueChanged(int index)
    {
        StepperValue = index;

        await Task.Delay(1);

        for (int i = 0; i < IsValidArray.Length; i++)
        {
            IsValidArray[i] = index > i ? true : null;
        }
    }
}

The Stepper seems to work correctly. Thus, I'm marking this item as declined.

Regards,
Hristian Stefanov
Progress Telerik