dotnet/maui

HTML select does not work in BlazorWebView

markrendle opened this issue · 10 comments

markrendle commented

Description

The HTML select element doesn't work in the BlazorWebView. The dropdown does not display. This appears to be a known issue with WebView2 (see MicrosoftEdge/WebView2Feedback#666) which they are being very slow to fix. This is going to cause problems with the MAUI+Blazor story.

Steps to Reproduce

  1. Create a MAUI Blazor app
  2. Add an InputSelect element to a page
  3. Run and click the select and the dropdown does not display

Expected Behavior

Dropdown should display

Actual Behavior

Dropdown does not appear, apparently it's behind the WebView2 control

Basic Information

  • Version with issue: 6.0 Preview 4
  • Last known good version: None
  • IDE: Visual Studio 2019 Preview
  • Platform Target Frameworks:
    • UWP: Current
markrendle commented

This bug still exists in .NET 6 Preview 5. I've created a simple repro project here: https://github.com/markrendle/blazor-desktop-select-issue

markrendle commented

Update: the WebView2 team have prioritized this issue and will start working on it soon: MicrosoftEdge/WebView2Feedback#666 (comment)

  • 👍2
Eilon commented

Sorry for the delay responding here. We did chat with the WebView2 team and they are indeed prioritizing the issue.

markrendle commented

Update for .NET 6 Preview 7:

I just created a new maui-blazor app and added an InputSelect to it and the problem is still there. The dropdown does not display when running the WinUI build.

Per the fix on MicrosoftEdge/WebView2Feedback#666 I've installed Edge Canary 94.0 and set the WEBVIEW2_RELEASE_CHANNEL_PREFERENCE environment variable to 1 to ensure it gets used.

CoreWebView2Environment.GetAvailableBrowserVersionString() returns 94.0.982.0 canary as expected.

Is it possible that something inside BlazorWebView is overriding the CoreWebView2 environment?

Using the ALT+Down keyboard shortcut (as mentioned in MicrosoftEdge/WebView2Feedback#666 (comment)) does work.

I'm worried that the next drop for .NET 6 is RC1 and this still doesn't work out-of-the-box.

Eilon commented

@markrendle I'll take another look. There's no special code in BlazorWebView one way or another regarding this, so maybe there's some other bug related to WebView2 here.

  • 👍1
Eilon commented

I just tried with an even newer one, 95.0.997.0 canary, and still dropdown is not showing up (unless I do Alt+Down).

Eilon commented

It works fine in WPF/WinForms, but not WinUI (which is what .NET MAUI uses).

Eilon commented

I filed a new WebView2 bug here: MicrosoftEdge/WebView2Feedback#1693

It repros in WebView2 in WinUI even without any BlazorWebView stuff.

I know it's not a real workaround, but in the meantime you could try to use alternative UIs to HTML <select> such as what Bootstrap offers: https://getbootstrap.com/docs/4.0/components/dropdowns/ (and of course there are a million other versions out there). Also you can set something like size="2" on the <select> so that it's a listbox instead of a dropdown. Also not a great solution.

markrendle commented

@Eilon Thanks for the update. For my project I've switched my UI library to MudBlazor which has a combo box implemented without select, and is also really rather good in other ways.

  • 👍1
Eilon commented

I'm closing this issue here because there's no further changes required in BlazorWebView. You can follow the WebView2 issue here: MicrosoftEdge/WebView2Feedback#1693