HTML SELECT dropdown doesn't show in WinUI apps even with Canary 95.0.997.0

[Eilon]

Description

Using Edge Canary WebView2 (95.0.997.0) specifically in WinUI apps, the dropdown part of an HTML SELECT doesn't not show up. You can see it sometimes flicker for a nanosecond, but it never shows up. You can use the Alt+Down trick I previously mentioned, but that is not commonly known or discoverable.

Version
SDK:
Runtime: 95.0.997.0
Framework: WinUI Desktop
OS: Win10 21H1 (10.0.19043.1165)

Repro Steps

In general, create any WinUI app (I used Desktop, maybe UWP is the same), and set its Source URL to a page on the Internet that has a dropdown, e.g. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

Here's what I put in the XAML:

<WebView2 x:Name="wv2" Source="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select" MinHeight="500" MinWidth="500"></WebView2>

Using regular Edge this doesn't work, which might be expected, but I ran this command to force a specific WebView2 Canary version and the experience is the same:

REG ADD HKLM\Software\Policies\Microsoft\Edge\WebView2\BrowserExecutableFolder /v * /t REG_SZ /d "C:\Users\elipton\AppData\Local\Microsoft\Edge SxS\Application\95.0.997.0"

Screenshots

Additional context

This doesn't repro on WPF or WinForms. WinUI only.

AB#35621072

[Eilon]

Tagging @champnic

[Eilon]

Note: This is a follow-up to #666

[champnic]

Thanks @Eilon! I've added this bug to our backlog. Is this a regression, or have you never seen HTML Select work in WinUI? Are you setting TopMost on your app or is this just a default WinUI app?

[Eilon]

I'm not sure if it's a regression.

Nothing is set to top-most. It is a 100% default WinUI project except for that 1 line of XAML I showed to add the WebView2.

[champnic]

Thanks. This sounds like it's probably a focus issue and not a layering issue.

[Eilon]

Indeed, dropdowns in Windows are often tricky because they're a separate window. I've dealt with this myself more times than I care to admit!

[kitgrose]

I have this same issue in UWP too, but only when it's running in full screen windowing mode (e.g. by pressing Win+Shift+Enter on the app).

For reference, I'm running WinUI 2.8.0-prerelease.210927001, Edge 95.0.1020.30 on Windows 11 v21H2 (build 22000.258).

[ispysoftware]

Having the same issue, WinUI 3 on all packages including 1.0.0-experimental1
Bit of a show stopper.

[JanusUdsen]

I'm looking forward to getting it fixed, I've developed a work around for now. Every time the user clicks on a dropdown on my website I send an event to my UWP app, and then I display the cursor. At the same time I expand the dropdown with the size property, and shrink when the user selects an option. Still a bit messy and would prefer it just to work... and of course you have to own the website you are showcasing.

[ispysoftware]

microsoft/microsoft-ui-xaml#3230
microsoft/microsoft-ui-xaml#5570

[ispysoftware]

@champnic do you have any update for us on this?

[champnic]

We're currently working on the underlying cause for this issue, which unfortunately affects more than just the HTML select dropdowns. I'll let you know when we are closer to getting the fix shipped. Thanks!

[wthks]

We're currently working on the underlying cause for this issue, which unfortunately affects more than just the HTML select dropdowns. I'll let you know when we are closer to getting the fix shipped. Thanks!

hello @champnic any update on this? btw. I figured out that when pressing the enter key on the dropdown it opens.

[champnic]

The core problem seems to be a WinUI bug that steals focus briefly from the WebView2 when clicked, which causes the WebView2 to dismiss the dropdown right away. 'Enter' doesn't run into that problem because it doesn't include a click, so that's a workaround for now.

We're working with the WinUI team to figure out what the fix would be but don't have a timeline yet. My guess would be in January.

[ilovepumpkin]

@champnic Have you decided the timeline for this issue? We have a product which will be released in Q1, not sure if we still have time to wait for your fix. 'Enter' could be a workaround for development, but from customer perspective, it might not be acceptable, especially our target device is Surface. Do you have any programming workaround like injecting some javascript code to hack some code so users can still use SELECT dropdown as usual?

[wthks]

I've switched to blazor with electronNET. I sadly cant use WinUI to make my application rounded and remove the titlebar.

[marmic]

I confirm I have the same issue and this is a no go for using WinUI3 for us. Hope it will be fixed soon.

[champnic]

I believe the fix for this has been checked in and should be available in WindowsAppSDK 1.1. Confirming with the WinUI team.

[champnic]

Here's the info I have on the WindowsAppSDK 1.1 timeline:
https://github.com/microsoft/WindowsAppSDK#roadmap

There should be a preview before the release, but I'm not sure on the timing for that.

[champnic]

This is fixed in the latest WindowsAppSDK prerelease. Thanks!

[ispysoftware]

@champnic where is this available to test?
https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/release-channels
latest are all back in 2021

[champnic]

Hey @ispysoftware - The fix should be available in 0.8.7-preview1:
https://www.nuget.org/packages/Microsoft.ProjectReunion/0.8.7-preview1

[ispysoftware]

Thanks @champnic - i'm not using projectreunion though, i'm using the nuget package Microsoft.WindowsAppSDK

Do you have an update schedule for that?

[champnic]

Looks like Microsoft.WindowsAppSDK 1.0.1 and 1.1-preview should both have the fix, and are currently scheduled for mid-March (a week or two from now). Thanks!

[ispysoftware]

this does now show the drop-down but with some fairly serious issues..

debugging the app in visual studio and then moving the application window results in drop-downs popping up outside the application window:

https://imgur.com/a/ZpNnqQg

[Eilon]

@ispysoftware some dropdowns are free spirits and remain un-bounded by the rules of windowing 😄

But yeah that looks pretty serious!

@champnic - can we re-open this bug, and any associated internal work item? Or should we log a new bug?

[champnic]

@ispysoftware I saw you opened a separate issue that we'll use to track this, #2290. I believe we are doing work that will fix this issue, but we'll verify.

[Spitzbua]

I installed new App SDK and WebView2 Runtime 101.0.1210.53 but I have the same behaviour as mentioned in the description ..You can see it sometimes flicker for a nanosecond, but it never shows up.
Does anyone have any idea why the behaviour has not changed?

Version
SDK: 1.0.1
Edge: 101
Framework: .Net 4.0, WebView2 Runtime 101.0.1210.53
OS: Win 11

[champnic]

Hey @Spitzbua - If you try with a new SDK and/or runtime do you still see this issue? I was unable to reproduce the issue using WindowsAppSDK 1.0.1 and runtime 102.0.1245.33.

[Spitzbua]

@champnic , thanks for the quick response. Unfortunately I experience the same faulty behaviour - it seems like nothing has changed. I checked the version (app sdk 1.01 and runtime 102.0.1245.33) and those seem alright.
I'm not sure if it's due to the webview or related to the Flutter Framework or a combination of both.
Do you have any ideas on how to trace the problem?

[champnic]

Can you try a simple WindowsAppSDK app without using Flutter to see if it's related to Flutter or not?

[tdh4vn]

@champnic , thanks for the quick response. Unfortunately I experience the same faulty behaviour - it seems like nothing has changed. I checked the version (app sdk 1.01 and runtime 102.0.1245.33) and those seem alright. I'm not sure if it's due to the webview or related to the Flutter Framework or a combination of both. Do you have any ideas on how to trace the problem?

I have same issue in flutter. have you resolved it yet?

[Spitzbua]

We are searching for an alternative solution to show the user the selection list via Javascript. But that's a workaround and not the perfect solution. It's pretty hard to trace down the actual problem.
It seems related to flutter otherwise more developer would have raised tickets?

[champnic]

@Spitzbua It does sound limited to Flutter as far as I can tell. I would recommend opening a ticket/issue on them if you can.

[TomOeser]

@champnic
The problem does not seem to be caused by flutter after all.

I have a simple WPF application, a WebView2 on it, a quasi empty HTML page with a select/dropdown on it.

Launched from Visual Studio, the dropdown works as expected, both in debug and in release mode.

However, if the application is then started from outside, e.g. directly in the release folder by clicking on the application file, the dropdown no longer works and the list is placed incorrectly, as described by many.

This is quite frustrating, as it is a fairly standard element.

I use:
Framework C# .Net 6.0
Windows 11 64bit 10.0.22621.0
Nu-get package Microsoft.Web.WebView2 1.0.1293.44 and also 1.0.1340-prerelease
webview2 runtime 104.0.1293.63

[champnic]

@TomOeser Would you be able to share that sample app?

[champnic]

Also could you open in a new issue? This one was specifically about the WinUI control, but sounds like you found this reproducing in the WPF control as well.

[vorte]

@Spitzbua Did you figure out a solution to this problem? I am seeing the same as well using flutter and webview2.

Version
Flutter: 3.3.7
Flutter plugin webview_windows: 0.2.2
Webview Runtime: 107.0.1418.35
OS: Win11 22H2 (10.0.2261)