MudDatePicker with mask jump back caret on input in Server Side

Bug type

Component

Component name

MudDatePicker

What happened?

When i develop local it not visible, but if publish on remote linux. Linux on low resources VM. I see how every cursor jumping back if i type quickly. <MudDatePicker Label="Date" @bind-Date="@DocDate" Editable="true" Clearable="true" Mask="@(new DateMask("dd.MM.yyyy"))" DateFormat="dd.MM.yyyy" > </MudDatePicker>

Expected behavior

In Remote ServerSide App if quickly type from keyboard date caret in field stay at end of input.

Reproduction link

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

Reproduction steps

1. run server side app with datepicker with mask editable and clearable.
2. in developer console browser set network type to slow 3g
3. try quickly type from keyboard date. for example 12.12.12, result 12.12.1|2 or even worse like 1012002

Relevant log output

No response

Version (bug)

6.1.8

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

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

[dennml]

@csuka1219 I was trying with

        protected override Task StringValueChanged(string value)
        {
            if (!string.IsNullOrEmpty(value))
            {                
                if (DateTime.TryParseExact(value, DateFormat, CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime validDate))
                {
                    Date = validDate;
                }
            }

            return base.StringValueChanged(value);
        }

But the problem is that StringValueChanged is not invoked when I type into the MudDateField from your github sample. It is only invoked if the focus changes away from that component. If that was invoked when typing, it would set the Date value as soon as a valid date is typed. I can confirm that StringValueChanged does get invoked when typing if I set Mask like the commented line in your sample. However that causes the original issue where the caret jumps around with the mud masking; exactly the issue we’re trying to avoid. This seems to indicate that StringValueChanged does not get invoked by MudBlazor when typing if Mask is null. If we could change that so it does get invoked, I think your solution with cleave.js would work perfectly.

[dennml]

For me it works well, the only problem is that i need to click out of the datepicker component’s focus to bind the value to the DateTime variable, I’m working on the solution of the problem.

Thanks @csuka1219 your solution is really appreciated. The masking works well for me with no cursor jumping but I also have the problem you mentioned. It does not bind until the element loses focus. In my case I need it to bind once the text is a valid date but I have not found a way to do that or access the string from blazor code. If you have any progress of tips I would be very grateful.