Why does MudBlazor form validation require me to click save twice when form was invalid and is then valid?

Question

Proof of concept can be seen at https://try.mudblazor.com/snippet/wYwyulRbnpqkbfVJ

In this example, click Save without having touched any of the fields above the Save button - the validation errors will display. Then, choose a value from the drop-down and enter some text in the text field, and click the Save button again - the validation errors disappear, but the SaveCondition method is not called. Click the Save button again and the SaveCondition method is called.

In any other circumstance, the SaveCondition method is always called. It is only not called if there were validation errors prior to clicking the Save button.

How can I fix this?

Answer 1

This behaviour is occurring because of the way the MudTextField is binding to it's Value i.e. Condition.

When you add text in the condition text field and then immediately after click the Save button, your save click gets overridden by the MudTextField's Value update, which by default happens when enter is pressed or when it loses focus (which happens when you click save immediately after).

You can counter this by setting MudTextField's Immediate property to true, this will change it's Value whenever the user types instead of when it loses focus.

<MudForm @ref="_addForm" @bind-IsValid="@_addFormIsValid">
    <MudSelect Dense="true" T="int" Label="Condition Type" For="@(() => ConditionType)" @bind-Value="ConditionType">
        <MudSelectItem Value="0" Disabled="true">Select Condition Type</MudSelectItem>
        <MudSelectItem Value="1">From</MudSelectItem>
        <MudSelectItem Value="2">Subject</MudSelectItem>        
    </MudSelect>

    <MudTextField T="string" Immediate="true" @bind-Value="Condition" Label="Condition" Required="true" RequiredError="You must enter a condition" />
</MudForm>

MudBlazor Snippet