Issue with rendering elements in RadzenSteps component

Radzen.Blazor Components
1

I have a strange behavior while rendering elements in a RadzenSteps component.

I have reduced the code to a minimal to produce this behavior and it's like this:

I have a list of elements

 protected override Task OnInitializedAsync()
    {
        var firstElement = new FormElement { IsRequired = true, Title = "first element", Type = FormElementType.Text, Id = 1 };
        var secondElement = new FormElement { IsRequired = true, Title = "second element", Type = FormElementType.Text, Id = 2 };

        _elements.Add(firstElement);
        _elements.Add(secondElement);
        return base.OnInitializedAsync();
    }

that I will display like this:

<RadzenTemplateForm Data="@_elements" Submit="@FormSubmit" TItem="List<FormElement>">
    <ChildContent>
        <RadzenSteps style="width:300px;">
            <Steps>
                @foreach (var element in _elements)
                {
                    <RadzenStepsItem Text="@element.Title">
                        <RadzenTextBox @bind-Value="@element.ValueText" Name="@element.Id.ToString()" Placeholder="@element.Title"/>
                        <RadzenRequiredValidator Component="@element.Id.ToString()" Text="Required"/>
                    </RadzenStepsItem>
                }
            </Steps>
        </RadzenSteps>
    </ChildContent>
</RadzenTemplateForm>

The flow to reproduce is: Complete the first element, next, back and now you see the validation error and if I press next it will not work.

What I have observed:

The DOM element rendered by blazor for the first element and second element have the same internal reference (_bl_GUID), so I believe that the validator will fail validating because no value is in second element when I'm in first element.

If the second element is numeric, it works.

I tried adding new @ref in a list of elements, setting attributes, id, class but nothing works.

If I write the steps by hand it works. Only when I iterate through a collection it has this behavior

chrome_nwvSGLGN1E

2

I think the problem occurs because @bind-Value is set to the same thing - element.ValueText. The Blazor validation cannot handle this.

3

There are two different instances of a FormElement class. If they were the same, I should have seen in second element the value of first element. If I change the type of the second element in numeric and bind still to element.ValueText, it works.

Is there something I miss here?

4

You can also try setting the @key attribute of RadzenStepsItem. It often fixes issues with @foreach

1 Like
5

Thank you so much.

Setting the @key for RadzenSteptsItem didn't work but creating a div with @key around my element is working. I also tested in my full form viewer and it's OK. Thank you! :hugs:

<RadzenStepsItem Text="@element.Title">
    <div @key="@element">                        
        <RadzenTextBox @bind-Value="@element.ValueText" Name="@element.Id.ToString()" Placeholder="@element.Title"/>
        <RadzenRequiredValidator Component="@element.Id.ToString()" Text="Required"/>
    </div>
</RadzenStepsItem>