MudTextField with Mask does not fire OnKeyUp event

[adammeaney]

Things to check

• [X] I have searched the existing issues for this bug
• [X] To rule out a caching problem I made sure the bug also happens in an incognito tab

Bug type

Component

Component name

MudTextField

What happened?

If you have a mask on a MudTextField, you cannot use the OnKeyUp event to register for "Enter" to submit a field.

Expected behavior

OnKeyUp fires when typing

Reproduction link

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

Reproduction steps

1. Type in the TryMudblazor
2. See no second text field.
3. Remove PatternMask and try again.
4. See text update ...

Relevant log output

No response

Version (bug)

7.5.0

Version (working)

No response

What browsers are you seeing the problem on?

Chrome, Other

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

[LeonardoLeme]

Hello, adammeaney!

Have you found the solution for this problem? I'm having the same situation here.

[srs-adamr]

It seems to be an issue with .NET 9, when upgrading to .NET 9 it begins to throw:

Looks like isComposing isn't valid?

Unknown property isComposing at Microsoft.AspNetCore.Components.Web.KeyboardEventArgsReader.Read(JsonElement jsonElement)

blazor.webassembly.js:1 Uncaught (in promise) Error: System.InvalidOperationException: There was an error parsing the event arguments. EventId: '402'. ---> System.Text.Json.JsonException: Unknown property isComposing at Microsoft.AspNetCore.Components.Web.KeyboardEventArgsReader.Read(JsonElement jsonElement) at Microsoft.AspNetCore.Components.Web.WebEventData.TryDeserializeStandardWebEventArgs(String eventName, JsonElement eventArgsJson, EventArgs& eventArgs) at Microsoft.AspNetCore.Components.Web.WebEventData.ParseEventArgsJson(Renderer renderer, JsonSerializerOptions jsonSerializerOptions, UInt64 eventHandlerId, String eventName, JsonElement eventArgsJson) --- End of inner exception stack trace --- at Microsoft.AspNetCore.Components.Web.WebEventData.ParseEventArgsJson(Renderer renderer, JsonSerializerOptions jsonSerializerOptions, UInt64 eventHandlerId, String eventName, JsonElement eventArgsJson) at Microsoft.AspNetCore.Components.Web.WebEventData.Parse(Renderer renderer, JsonSerializerOptions jsonSerializerOptions, WebEventDescriptor eventDescriptor, JsonElement eventArgsJson) at Microsoft.AspNetCore.Components.Web.WebEventData.Parse(Renderer renderer, JsonSerializerOptions jsonSerializerOptions, JsonElement eventDescriptorJson, JsonElement eventArgsJson) at Microsoft.AspNetCore.Components.RenderTree.WebRenderer.WebRendererInteropMethods.DispatchEventAsync(JsonElement eventDescriptor, JsonElement eventArgs) at System.Object.InvokeStub_WebRendererInteropMethods.DispatchEventAsync(Object , Span`1 ) at System.Reflection.MethodBaseInvoker.InvokeWithFewArgs(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture) --- End of stack trace from previous location --- at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson) at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson) at v.endInvokeDotNetFromJS (https://localhost:7103/_framework/blazor.webassembly.js:1:3158) at Object.Qt [as endInvokeDotNetFromJS] (https://localhost:7103/_framework/blazor.webassembly.js:1:56002) at https://localhost:7103/_framework/dotnet.runtime.o8gq1i8bk6.js:3:33879 at Fc (https://localhost:7103/_framework/dotnet.runtime.o8gq1i8bk6.js:3:172155) at wasm://wasm/00b59d1a:wasm-function[287]:0x1f0d9 at wasm://wasm/00b59d1a:wasm-function[218]:0x1c7c3 at wasm://wasm/00b59d1a:wasm-function[209]:0xea10 at wasm://wasm/00b59d1a:wasm-function[246]:0x1d33b at wasm://wasm/00b59d1a:wasm-function[3220]:0xf0e17 at wasm://wasm/00b59d1a:wasm-function[2543]:0xc697e

.NET 9 Changes:

https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-9.0?view=aspnetcore-9.0#handle-keyboard-composition-events-in-blazor

[vernou]

MudTextField with mask manages all key events to compute the text, so OnKeyUp isn't fired.

---

The original problem :

to register for "Enter" to submit a field.

MudMask has the parameter Immediate inherited from MudBaseInput, but it ignores it. We can evolveMudMask so that it takes into account the parameter Immediate, so it's possible to submit the field on set the bind value.

@adammeaney, @LeonardoLeme, will this solve your problem?

[adammeaney]

@vernou No, that is not sufficient.

Using Immediate I could update my bound value, but I could not know when the person hit enter to submit it, so I can't see how that would help me.

[mguinness]

Problem also mentioned in https://github.com/MudBlazor/MudBlazor/discussions/8824. Still an issue with 8.7.0 release.

MudTextField with mask manages all key events to compute the text, so OnKeyUp isn't fired.

From the MudMask source it only appears that OnKeyUp is intercepted?

https://github.com/MudBlazor/MudBlazor/blob/1c75e64bb07b695073ac826a65fd9a5898127092/src/MudBlazor/Components/Mask/MudMask.razor.cs#L190

Looking at HandleKeyDown it should invoke the user defined callback, but this doesn't appear to occur.

https://github.com/MudBlazor/MudBlazor/blob/1c75e64bb07b695073ac826a65fd9a5898127092/src/MudBlazor/Components/Mask/MudMask.razor.cs#L236-L237

@ScarletKuro Does this have any bearing on KeyInterceptorService that you implemented?