Search code examples
c#winui-3webview2winui

Cannot interact with buttons inside iframe in Webview2 (WinUI 3)

I am using Webview2 in WinUI3. I found that when I clicked the icon of "Google Apps" in google search engine, the flyout (which is a iframe) will appear as usual like This . The red border in this picture was created with JavaScript:

var ifr = document.getElementsByTagName("iframe");

for (let f of ifr){
    f.style.border = "Red 3px solid";
}

The color of the button inside will change when the mouse hovers. But when I clicked the button (for example YouTube), the flyout disappeared just like I clicked elsewhere. Same goes to account button's flyout. And it is also a iframe.

I didn't modify anything including Webview2 events and properties

I have tested the same problem on WinForms app. This problem doesn't happen in WinForms app, only in WinUI3. I guess the focus of pointer when the flyout appeared is still on the website instead of flyout even though Webview2 displays flyout on the top. Strangely the default Webview2 window created automatically by "New Window Request" won't have this problem.

Solution

  • I guess this is related to this known issue.

    I reproduced your issue with WinAppSDK v1.5.240428000 and confirmed the fix with v1.6.240531000-experimental1.

    To learn more about the experimental channel check this doc.

    After updating to v1.6.240531000-experimental1, don't forget to add the following to your *.csproj.

    <PropertyGroup>
  <WindowsSdkPackageVersion>10.0.19041.35-preview</WindowsSdkPackageVersion>
</PropertyGroup>

    WinAppSDK v1.6 as stable release is planned for this fall. So, you'll have to use the experimental version unless a patch with this fix is released for v1.5.

    UPDATE

    This was fixed on v1.5.4.