MudTextField do not working in .NET 8.0 version WebAssembly

[oliverigor27]

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?

I'm trying to use MudTextField in a application but it does not working well. It does not recognize the properties in MudTextField and looks like is not reading the input.

That is what i'm doing:

                <MudTextField 
                    Class="input-fields" 
                    Label="Username" 
                    Variant="Variant.Outlined"
                    @bind-Value="@LoginModel.CPF" 
                    Mask="@(new PatternMask("000.000.000-00"))" 
                />

This is inside a with a Model, a On valid and invalid submit

Expected behavior

Reproduction link

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

Reproduction steps

1. I try to write something in the input
2. The mask that should be applied do not work
3. Even with a valid value, it do not send an return a validation error ...

Relevant log output

No response

Version (bug)

7.4.0

Version (working)

6.20.0

What browsers are you seeing the problem on?

Chrome

On which operating systems are you experiencing the issue?

macOS

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[ScarletKuro]

I copied your code from the reproduction link:

Reproduction link https://try.mudblazor.com/snippet/wEcSuVGHUpcGWDmg

I pasted it into a project created from the official MudBlazor Templates for WebApp. It's using .NET 8.0, MudBlazor 7.4.0, and WebAssembly global interactivity, and I see no problem.

TryMudblazor is also using the latest version and is a standalone WebAssembly (not WebApp), and as you can see, it's working there too. Please check your application configuration. I suggest you try our templates.

[ScarletKuro]

Unless I misunderstand something, but in repro steps it says:

The mask that should be applied do not work

But I see that mask is being applied.

Even with a valid value, it do not send an return a validation error

This I don't really understand, but if the question is why the validation is not working, then you are missing a lot of things like <DataAnnotationsValidator/> and For="@(() => loginModel.UserRegister)", please refer to https://mudblazor.com/components/form#editform-support sample

[oliverigor27]

Unless I misunderstand something, but in repro steps it says:

The mask that should be applied do not work

But I see that mask is being applied.

Even with a valid value, it do not send an return a validation error

This I don't really understand, but if the question is why the validation is not working, then you are missing a lot of things like <DataAnnotationsValidator/> and For="@(() => loginModel.UserRegister)", please refer to https://mudblazor.com/components/form#editform-support sample

The validation is Working, the problem is the behavior of the MudTextField. It's invaliding any attempt to send a request to the backend and is having the behavior that i showed in the print.

[ScarletKuro]

The validation is Working, the problem is the behavior of the MudTextField. It's invaliding any attempt to send a request to the backend and is having the behavior that i showed in the print.

You need to elaborate much more and provide more info on what the actual problem is. Perhaps it would be better to provide a simple reproduction project via zip or repository.

Your TryMudBlazor sample doesn't have a backend request, but I can clearly see that the OnValidSubmit is being executed on login and the value is updated:

This contradicts everything you said above. It looks like you are not running any interactivity mode with MudTextField, which is why you are having all these problems. This is expected, as static SSR is not supported.

[oliverigor27]

The validation is Working, the problem is the behavior of the MudTextField. It's invaliding any attempt to send a request to the backend and is having the behavior that i showed in the print.

You need to elaborate much more and provide more info on what the actual problem is. Perhaps it would be better to provide a simple reproduction project via zip or repository.

Your TryMudBlazor sample doesn't have a backend request, but I can clearly see that the OnValidSubmit is being executed on login and the value is updated:

This contradicts everything you said above. It looks like you are not running any interactivity mode with MudTextField, which is why you are having all these problems. This is expected, as static SSR is not supported.

I made a sample, you can see here: https://github.com/oliverigor27/AplicacaoTeste.git

[ScarletKuro]

I made a sample, you can see here: https://github.com/oliverigor27/AplicacaoTeste.git

But this setup is absolutely not correct:

1. You said it's WebAssembly, but it's using just the InteractiveServer, which means it doesn't use WASM at all.
2. It's not a complete setup. You are missing <HeadOutlet @rendermode="InteractiveServer"/> and <Routes @rendermode="InteractiveServer" /> in App.razor, which are important parts when setting up your WebApp. Of course, it will not work as your page is rendered as static, not interactive.
3. Where did you get OnValueChanged from? It doesn't exist in MudBlazor.

[oliverigor27]

I made a sample, you can see here: https://github.com/oliverigor27/AplicacaoTeste.git

But this setup is absolutely not correct:

1. You said it's WebAssembly, but it's using just the InteractiveServer, which means it doesn't use WASM at all.
2. It's not a complete setup. You are missing <HeadOutlet @rendermode="InteractiveServer"/> and <Routes @rendermode="InteractiveServer" /> in App.razor, which are important parts when setting up your WebApp. Of course, it will not work as your page is rendered as static, not interactive.
3. Where did you get OnValueChanged from? It doesn't exist in MudBlazor.

Oh, i didn't knew about that. I'm sorry, i'm a back-end trying to do a webpage. Thank you again!