MudDatePicker: Text gets deleted after each key stroke with Mask inside MudForm

Bug type

Component

Component name

MudDatePicker

What happened?

Entering a number in the date picker with a mask when the form has bound errors, deletes the text.

Events in order

1. From my understanding, the DateFormat causes a conversion error that fire EvaluateForm.
2. The form then fire ErrorsChanged and forces the page to rerender.
3. Something trigger MudMask and he forces the field to gets deleted.

Behaviors

• Using only the DateFormat causes the field to delete the date after a form submit.
• Using DateFormat with bind-Errors on the form causes the field to delete the date after a lost focus.
• Using DateFormat with bind-Errors and PatternMask causes the field to delete the date after each key stoke.

Code that produces the error

@using FluentValidation

<MudForm Model="@model" @bind-Errors="Errors">
    <MudDatePicker
        Editable="true"
        Placeholder="yyyy/MM/dd"
        DateFormat="yyyy/MM/dd"
        @bind-Date="model.BirthDate"
        Mask="@(new PatternMask("0000/00/00"))"/>
</MudForm>

@code {
    string[] Errors = {};
    Model model = new Model();

    public class Model
    {
        public DateTime? BirthDate { get; set; }        
    }
}

Expected behavior

• Don’t delete the date after each key stroke.
• Don’t lose focus in the date picker

Reproduction link

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

Reproduction steps

1. Enter a number in the date picker from the reproduction link

Relevant log output

After a key stroke:

EvaluateForm(), MudForm.razor.cs:183
MudBlazor.Interfaces.IForm.Update(), MudForm.razor.cs:178
OnConversionError(), MudFormComponent.cs:112
UpdateGetError(), Converter.cs:69
ConvertFromString(), DefaultConverter.cs:154
Get(), Converter.cs:48
StringValueChanged(), MudDatePicker.cs:70
MoveNext(), MudPicker.razor.cs:305
set_Text(), MudPicker.razor.cs:260
MoveNext(), MudBaseInput.cs:331
SetValueAsync(), MudTextField.razor.cs:127
UpdateValuePropertyAsync(), MudBaseInput.cs:341
UpdateValuePropertyAsync(), MudDebouncedInput.cs:64
MoveNext(), MudBaseInput.cs:205
SetTextAsync(), MudTextField.razor.cs:137
MoveNext(), MudTextField.razor.cs:142
MoveNext(), MudMask.razor.cs:229
MoveNext(), MudMask.razor.cs:203
<OnAfterRenderAsync>b__51_0(), MudMask.razor.cs:174
OnKeyDown(), KeyInterceptor.cs:81

Version (bug)

6.0.7

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

On what operating system are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project’s Code of Conduct

[kaleidocore]

FWIW, we have a related issue with regular text input fields that are using both Validation and RegEx masks. When the user starts entering text the caret will suddenly jump back into the middle of the text that was just written, which obviously messes up the text and frustrates the user. I have a suspicion that Debounce might be related too - ours is set to 500ms. The issue seems most notable when the webserver is slow.

[henon]

@avojacek you should not hijack this issue. Yours seem to be two entirely different issues, so please create a github issue for both of them and provide a TryMB for 1. 2. Yes, this is how the date mask works right now. It needs to be completely rewritten I guess but I lack the time to do it.