Blazor: @onchange event not working on input with type="datetime-local" in some browsers

Describe the bug

The “datetime-local” input type is currently only supported on Chrome and Edge. On browsers that don’t support it (e.g. Safari or Firefox on desktop) it gracefully degrades to a “text” type input. If I try to use the @onchange attribute on a supported browser this works fine and the method assigned to it is called when I make a change.

<input type="datetime-local" value=@dateTimeString @onchange=DateTimeChanged />

But if I try to use the @onchange attribute on this input in an unsupported browser, the method is not called and I get this error in the console.

Error: Invalid element type 'text'.

It seems like the error is coming from line 249 of EventForDotNet.ts. It’s expecting the element to be of type “datetime-local” since that’s what it was declared as, but the browser is providing it as type “text”. That’s my guess anyway.

To Reproduce

Here’s a minimalistic repro project. All relevant code is in the Index.razor file.

Exceptions (if any)

No exceptions in the IDE, just this error in the browser console.

Error: Invalid element type 'text'.

Further technical details

• ASP.NET Core version: 3.1.6 (Blazor v3.2.1)
• Include the output of dotnet --info:

.NET Core SDK (reflecting any global.json):
 Version:   3.1.302
 Commit:    41faccf259

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.15
 OS Platform: Darwin
 RID:         osx.10.15-x64
 Base Path:   /usr/local/share/dotnet/sdk/3.1.302/

Host (useful for support):
  Version: 3.1.6
  Commit:  3acd9b0cd1

.NET Core SDKs installed:
  3.1.200 [/usr/local/share/dotnet/sdk]
  3.1.202 [/usr/local/share/dotnet/sdk]
  3.1.300 [/usr/local/share/dotnet/sdk]
  3.1.301 [/usr/local/share/dotnet/sdk]
  3.1.302 [/usr/local/share/dotnet/sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.App 3.1.2 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.4 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.5 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.6 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.17 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.18 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.19 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.20 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.2 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.4 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.5 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.6 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download

• The IDE (VS / VS Code/ VS4Mac) you’re running on, and it’s version: VS for Mac 8.6.6 Build 11.

• I can reproduce this on both server-side Blazor and WebAssembly Blazor.

[craigbrown]

Yeah there is definitely an unfortunate lack of support in some browsers! The issue is that while these browsers “degrade gracefully”, Blazor doesn’t. Thanks for looking into it, hopefully this is something that can be easily fixed in future.

[mkArtakMSFT]

Thanks for contacting us. Support of datetime-local is somewhat problematic: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

We will look into what can be done here in the future.