Question Moving to MudBlazor - Runtime error in page - I can't see MudTextField

[Pablo]

Hello,
I'm trying to practice with MudBlazor doing the same I did before without it (but more complex this time, I added the KeyDown event), and it seems something related to the MudTextField is wrong, because it is not shown in the page (the MudButton is) and at the bottom of the screen it says "there is an unhandled error". I asked here before about the Key event C# method parameters and how to declare it inside the MudTextField tag, but nobody replied; then I continued searching and found something like what you can see in my code, but I'm not sure it is correct (it seems it's not, and/or something else is not).

@page "/calc"

<PageTitle>Calculator</PageTitle>

<h3>Calculator</h3>
<br />
<MudTextField @bind-Value="input" Variant="Variant.Text" @OnKeyDown="OnKeyDown" KeyDownPreventDefault="true"></MudTextField>
<br />
<MudButton Variant="Variant.Filled" @onclick="Calculate">=</MudButton>

@code {
    private string input = string.Empty;

    private void OnKeyDown(KeyboardEventArgs e)
    {
        if (Char.IsDigit(e.Key[0]) || "+-*/".Contains(e.Key[0]))
            input += e.Key[0];       
    }

    private void Calculate()
    {
        
    }
}

If you don't ignore my question this time and can guide me to solve this issue, I would apprecite it very much. Thanks.
Pablo

 

[Skydiver]

This forum is supported by volunteers. People respond as their time and interest allows.

 

[cjard]

there is an unhandled error

Open the browser tools (press F11) and tell us the error in the console

----

By the way, for the approach you're attempting it would be simpler to use a Regex mask instead, I think

See this example; TryMudBlazor - Write, compile, execute and share Blazor components in the browser - note how you cannot type e.g. a ! symbol into the "Add Tag" field because it has a mask restricting to only letters and numbers (and period/hyphen etc)

 

[Pablo]

This forum is supported by volunteers. People respond as their time and interest allows.

I know. Sorry for what I said. Thank you.

 

[Pablo]

Open the browser tools (press F11) and tell us the error in the console

----

By the way, for the approach you're attempting it would be simpler to use a Regex mask instead, I think

See this example; TryMudBlazor - Write, compile, execute and share Blazor components in the browser - note how you cannot type e.g. a ! symbol into the "Add Tag" field because it has a mask restricting to only letters and numbers (and period/hyphen etc)

Hi, cjard
Here is the error in the console:
---------------------------------------------------------------------------
[2023-06-18T15:28:54.889Z] Information: Normalizing '_blazor' to 'https://localhost:44393/_blazor'.
blazor.server.js:1 [2023-06-18T15:28:54.989Z] Information: WebSocket connected to wss://localhost:44393/_blazor?id=hzTOraDDcyE_1SSXcFI8Yw.
blazor.server.js:1 [2023-06-18T15:28:57.567Z] Error: There was an error applying batch 6.
log @ blazor.server.js:1
processBatch @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
_invokeClientMethod @ blazor.server.js:1
_processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
o.onmessage @ blazor.server.js:1
blazor.server.js:1 Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '@OnKeyDown' is not a valid attribute name.
at ie.applyAttribute (https://localhost:44393/_framework/blazor.server.js:1:24774)
at ie.insertElement (https://localhost:44393/_framework/blazor.server.js:1:23731)
at ie.insertFrame (https://localhost:44393/_framework/blazor.server.js:1:22715)
at ie.insertFrameRange (https://localhost:44393/_framework/blazor.server.js:1:26474)
at ie.insertElement (https://localhost:44393/_framework/blazor.server.js:1:23688)
at ie.insertFrame (https://localhost:44393/_framework/blazor.server.js:1:22715)
at ie.applyEdits (https://localhost:44393/_framework/blazor.server.js:1:21347)
at ie.updateComponent (https://localhost:44393/_framework/blazor.server.js:1:20631)
at https://localhost:44393/_framework/blazor.server.js:1:115262
at Pn.processBatch (https://localhost:44393/_framework/blazor.server.js:1:115634)
applyAttribute @ blazor.server.js:1
insertElement @ blazor.server.js:1
insertFrame @ blazor.server.js:1
insertFrameRange @ blazor.server.js:1
insertElement @ blazor.server.js:1
insertFrame @ blazor.server.js:1
applyEdits @ blazor.server.js:1
updateComponent @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
processBatch @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
_invokeClientMethod @ blazor.server.js:1
_processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
o.onmessage @ blazor.server.js:1
blazor.server.js:1 [2023-06-18T15:28:57.683Z] Error: System.AggregateException: One or more errors occurred. (InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '@OnKeyDown' is not a valid attribute name.)
---> System.InvalidOperationException: InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '@OnKeyDown' is not a valid attribute name.
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
--- End of inner exception stack trace ---
log @ blazor.server.js:1
tr @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
_invokeClientMethod @ blazor.server.js:1
_processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
o.onmessage @ blazor.server.js:1
blazor.server.js:1 [2023-06-18T15:28:57.684Z] Information: Connection disconnected.
blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
at bt.send (blazor.server.js:1:52080)
at kt._sendMessage (blazor.server.js:1:68715)
at kt._sendWithProtocol (blazor.server.js:1:68756)
at kt.send (blazor.server.js:1:68864)
at Object.beginInvokeDotNetFromJS (blazor.server.js:1:131820)
at w (blazor.server.js:1:2164)
at C.invokeMethodAsync (blazor.server.js:1:4014)
at HTMLElement.listener (MudBlazor.min.js:6:2465)
send @ blazor.server.js:1
_sendMessage @ blazor.server.js:1
_sendWithProtocol @ blazor.server.js:1
send @ blazor.server.js:1
beginInvokeDotNetFromJS @ blazor.server.js:1
w @ blazor.server.js:1
invokeMethodAsync @ blazor.server.js:1
listener @ MudBlazor.min.js:6
2blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
at bt.send (blazor.server.js:1:52080)
at kt._sendMessage (blazor.server.js:1:68715)
at kt._sendWithProtocol (blazor.server.js:1:68756)
at kt.send (blazor.server.js:1:68864)
at Object.beginInvokeDotNetFromJS (blazor.server.js:1:131820)
at w (blazor.server.js:1:2164)
at C.invokeMethodAsync (blazor.server.js:1:4014)
at MudResizeListener.resizeHandler (MudBlazor.min.js:6:31161)
------------------------------------------------------------------------------
I'm on the way of learning Regex as you told me, but by now I worry more solving issues and learning Blazor and MudBlazor.
Thank you for your help.
Pablo

 

[cjard]

The Regex to use would perhaps be "[0-9-+*/]"