Skip to content

Blazor - InputBase holds onto stale model when complex models are used. #62426

Open
@bonsall

Description

@bonsall

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

When binding a complex model to one of blazors built in input components (inherits InputBase<T>) you can run into an issue where the input component is no longer holding a reference to the correct model, and therefore validation does not behave as expected. Sometimes the validation message does not display. 100% of the time the FieldCssClass will not be set correctly.

Expected Behavior

Validation messages and css classes should still be applied when the underlying model for a input component changes.

Steps To Reproduce

Consider a model like this

public class ComplexModel
{
    public string Property1 { get; set; }

    public ChildModel Child { get; set; } = new();
}

public class ChildModel
{
    [Required]
    public string? Name { get; set; }

    public int Id { get; set; }
}

and a blazor component like this

<EditForm OnSubmit="SubmitModel" Model="ComplexModel">
    <p>Select a child</p>
    <ul>
        @foreach(var child in ChildOptions)
        {
            <li><button type="button" @onclick="() => SelectChild(child)">Child @child.Id</button></li>
        }
    </ul>
    <label for="ChildName">Child Name</label>
    <InputText @bind-Value="Model.Child.Name"
                       id="ChildName" />
    <ValidationMessage For="Model.Child.Name" />
    <button type="submit">Submit</button>
</EditForm>
@code {
    private ComplexModel Model { get; set; } = new();

    private ChildModel[] ChildOptions { get; } = [
        new ChildModel() { Id = 1; }
        new ChildModel() { Id = 2; }
        new ChildModel() { Id = 3; }
    ];

    void SelectChild(ChildModel child)
    {
        Model.Child = child;
    }

    void SubmitModel()
    {
        // Do things
    }
}

After selecting one of the children the validation message for the required Name property may or may not display. 100% of the times I tested this the invalid class was not applied to the input.

Exceptions (if any)

No response

.NET Version

8 (assuming 9 is affected a well).

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-blazorIncludes: Blazor, Razor Components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions