MudAutocomplete Validation does not work with pre-filled value when required

[Ahirrea]

Bug type

Component

Component name

MudAutocomplete

What happened?

MudAutocomplete does not seem to reflect the IsTouched and IsValid status correctly. Especially if the field is already prefilled and set to Required="true". I have recreated the situation in the Playground.

The current behavior makes validation difficult. In my case, I want to enable the 'Save' button when IsTouched and IsValid is true. This is the case when someone wants to edit data. Then they are pre-filled.

Expected behavior

If the form is valid, IsValid should be true. If MudAutocomplete is selected, IsTouched should also be true.

Reproduction link

https://try.mudblazor.com/snippet/GamSkhFLdmCrUpcM

Reproduction steps

1. Open the Link.
2. See that IsValid is false.
3. Select the Autocomplete Field.
4. Click outside of the Field to lose focus.
5. See that the IsTouched is still false.

Relevant log output

No response

Version (bug)

7

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[vernou]

MudForm at start (OnAfterRenderAsync) take the valid state if none field is required, but don't do a complete validation. The validation is executed only after a user interaction.

@ScarletKuro , is the desired behavior?

[ScarletKuro]

@ScarletKuro , is the desired behavior?

I'm not really familiar with the internal validation processes in mudblazor as it was done way before me, I usually ask consultation from @henon :)

[henon]

MudForm at start (OnAfterRenderAsync) take the valid state if none field is required, but don't do a complete validation. The validation is executed only after a user interaction.

@ScarletKuro , is the desired behavior?

        protected override Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                var valid = _formControls.All(x => x.Required == false);
                if (valid != IsValid)
                {
                    // the user probably bound a variable to IsValid and it conflicts with our state.
                    // let's set this right
                    SetIsValid(valid);
                }

            }
            return base.OnAfterRenderAsync(firstRender);
        }

I would say the comment speaks for itself, this was never about causing a validation run but for keeping consistency. I don't know what side effects doing a full validation run on first render would cause. This would have to be carefully analyzed.

[Ahirrea]

It would help if a click on the MudAutocomplete would behave just like other form inputs e.g. MudTextField when touched. At the moment, it does not set IsTouched to true and therefore does not trigger the validation.

[vernou]

MudAutocomplete has this comment in the method OnInputBlurredAsync :

we should not validate on blur in autocomplete, because the user needs to click out of the input to select a value, resulting in a premature validation. thus, don't call base base.OnBlurred(args);

So only a value selected from the drop down trigger the validation. Indeed, it isn't homogeneous with MudInput.

[vernou]

You can manually force the validation on autocomplete blur like :

<MudForm @ref="form" @bind-IsValid="IsValid"
         @bind-IsTouched="IsTouched">
    <MudAutocomplete T="string" Label="US States" @bind-Value="choice3.State" Required="true"
         ...
         OnBlur="ForceValidation"/>
</MudForm>

@code {
    MudForm form;

    private void ForceValidation()
    {
        form?.Validate();
    }

    // ...
}

See this example : https://try.mudblazor.com/snippet/mEmyaCQTCknWoTkm