MudTextField with InputType="InputType.Email" incorrectly converts extended ASCII characters in Google Chrome

[mark-storefeeder]

Bug type

Component

Component name

MudTextField

What happened?

Given the following Razor markup:

<MudTextField T="string" InputType="InputType.Email" />

In Google Chrome, when you enter certain strings which include extended ASCII characters AFTER the @ sign in the email address, the value in the MudTextField gets incorrectly converted.

For example, when you enter a@£, when the field loses focus the value is converted to a@xn--9a.

The same thing does NOT happen in Firefox.

Windows 11 Enterprise 23H2, Google Chrome 124.0.6367.91.

Expected behavior

The value should remain exactly as it's been typed - so if the user types a@£ then the value should remain as a@£.

Reproduction link

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

Reproduction steps

1. Using Google Chrome, go to https://try.mudblazor.com/snippet/QamouSmiyksuoPrA and run the code.
2. Enter the value a@£ in to the text field and tab or click out of the field.
3. Note that the value incorrectly changes to a@xn--9a when it should remain as a@£.

Relevant log output

No response

Version (bug)

6.19.1

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

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

[mark-storefeeder]

After further investigation I've discovered that this seems to be a bug with Blazor rather than MudBlazor.

I added this code to an empty Blazor application:

<input @bind-value="TextValue" type="email" />
<br />
@TextValue

@code {
    public string TextValue { get; set; }
}

And this is what I see when I run it in Chrome and enter a@£ in the input field:

So I'm not really sure where to go from here!

[mark-storefeeder]

I've raised an issue here: https://github.com/dotnet/aspnetcore/issues/55632

[mark-storefeeder]

Evidently this is a browser 'feature' for converting characters which aren't valid for hostnames, so nothing to do with Blazor at all - https://github.com/dotnet/aspnetcore/issues/55632#issuecomment-2110674765

I guess the only solution is either to avoid using InputType="InputType.Email", or try to do something clever around not accepting non-ascii characters after the @ symbol, but whatever the solution it's certainly not a MudBlazor issue.