MudTextField with Mask enabled has unexpected behavior on mobile browsers

I also found this problem while playing with the demo on mobile (Chrome on Android). After some debugging on my mobile browser I found that the event provided to this method differs from what I see when debugging on Chrome desktop . For example, on this demo, if I press the letter A on mobile the args.key property value is Unidentified, whereas on desktop its value is A. The keyCode is also off… The logic in the KeyInterceptor depends on the value provided by the key property of the event for it to work properly.

Additionally, on Chrome mobile the pressed key goes straight into the input before the keydown event gets fire. I found this and this, which makes me think that the current approach taken by the key interceptor in MudBlazor is not suitable for mobile.

I’m going to dig more into this to confirm my findings. If I got something of the above wrong please let me know.

If I can find a solution I’ll submit a PR with it.

CC @Mr-Technician @mckaragoz

Looking at this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=118639, the GBoard don’t send the keycode in the keydown event (except for special ones like “Delete”,“Backspace”). As can be seen in the above link, the GBoard Team consider it as a choice, not a bug. So the current Mud implementation should not rely on the keydown event to work properly on Android.

I think most js libs that works everywhere, like IMaskJS, ng-mask and v-mask, uses the input event. In this event, they sychronously check the new input value, compute the masked text, set it in the input value and adjust the cursor position.

It is important to be synchonous, otherwise will occur some underised flickering effects. Also, in my experiments, after an asynchonous call inside the input event handler the input.setSelectionRange calls won’t work. This means that the implementation will have to use dotnetRef.invokeMethod instead of dotnetRef.invokeMethodAsync when computing the mask.

I’m currently using a workaround (WASM only) for this problem, with some custom script and Reflection.

Add the following script in the index.html:

<script>
        class MudMaskWorkaround {
            static applyFix(appTextFieldRef, maskId) {
                const maskElement = document.getElementById(maskId);
                const input = maskElement.querySelector('input');
                let justFoundUnidentifiedKey = false;
                input.addEventListener('keydown', (args) => {
                    if (args.key == 'Unidentified') {
                        justFoundUnidentifiedKey = true;
                    }
                });
                input.addEventListener('input', async (args) => {
                    if (justFoundUnidentifiedKey) {
                        justFoundUnidentifiedKey = false;
                        const mask = appTextFieldRef.invokeMethod('ApplyMask', input.value);
                        input.value = mask.text;
                        input.setSelectionRange(mask.caretPos, mask.caretPos);
                        await appTextFieldRef.invokeMethodAsync('SetTextFromJSAsync', input.value);
                    }
                });
            }
        }
        window.MudMaskWorkaround = MudMaskWorkaround;
</script>

Create a component that inherits from MudTextField, ex: AppTextField.razor:

@using System.Reflection
@typeparam T
@inherits MudTextField<T>
@inject IJSRuntime JS
@{
    base.BuildRenderTree(__builder);
}
@code{
    private DotNetObjectReference<AppTextField<T>>? _ref;
    private MudMask? _maskReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if(firstRender){
            _ref = DotNetObjectReference.Create(this);
            _maskReference = (MudMask)GetType().BaseType!.GetField("_maskReference", BindingFlags.NonPublic | BindingFlags.Instance)!.GetValue(this)!;
            var maskId = (string)_maskReference.GetType().GetField("_elementId", BindingFlags.NonPublic | BindingFlags.Instance)!.GetValue(_maskReference)!;
            await JS.InvokeVoidAsync("MudMaskWorkaround.applyFix", _ref, maskId);
        }
    }

    [JSInvokable]
    public IMask ApplyMask(string text){
        Mask.SetText(text);
        return Mask;
    }

    [JSInvokable]
    public Task SetTextFromJSAsync(string text) => SetTextAsync(text, true);
}

Then use your custom inherited component instead of MudTextField:

<AppTextField Mask="..." etc.../>

In my app I had to adapt the MudDatePicker too. AppDatePicker.razor:

@using System.Reflection
@inherits MudDatePicker
@inject IJSRuntime JS
@{
    base.BuildRenderTree(__builder);
}
@code{
    private DotNetObjectReference<AppDatePicker>? _ref;
    private MudMask? _maskReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if(firstRender){
            _ref = DotNetObjectReference.Create(this);
            var inputReference = typeof(MudPicker<DateTime?>).GetField("_inputReference", BindingFlags.NonPublic | BindingFlags.Instance)!.GetValue(this);
            _maskReference = (MudMask)inputReference!.GetType().GetField("_maskReference", BindingFlags.NonPublic | BindingFlags.Instance)!.GetValue(inputReference)!;
            var maskId = (string)_maskReference.GetType().GetField("_elementId", BindingFlags.NonPublic | BindingFlags.Instance)!.GetValue(_maskReference)!;
            await JS.InvokeVoidAsync("MudMaskWorkaround.applyFix", _ref, maskId);
        }
    }

    [JSInvokable]
    public IMask ApplyMask(string text){
        Mask.SetText(text);
        return Mask;
    }

    [JSInvokable]
    public Task SetTextFromJSAsync(string text) => SetTextAsync(text, true);
}