[Problem/Bug]: WebView2 does not support blocking main thread using javascript async/await

[rishabgt]

What happened?

As the showModal API has been deprecated in modern browsers - https://developer.mozilla.org/en-US/docs/Web/API/Window/showModalDialog, I am trying to achieve a similar functionality using the polyfill mentioned in the MDN page :https://github.com/niutech/showModalDialog/blob/gh-pages/showModalDialog.js.

The above mentioned polyfill works fine with edge/chrome browser but it does not work with WebView2 application. When the modal pops up, it freezes the entire application. The WebView2 application is used to launch a web application in embedded and all the code changes mentioned here are on javascript side.

Importance

Blocking. My app's basic functions are not working due to this issue.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

No response

SDK Version

No response

Framework

Win32

Operating System

Windows 10, Windows 11

OS Version

No response

Repro steps

Use the showModal dialog polyfill and re-implement the API using async-await in javascript, and invoke the modal in middle of the code flow.

Repros in Edge Browser

No, issue does not reproduce in the corresponding Edge version

Regression

No, this never worked

Last working version (if regression)

No response

[ekalchev]

Sounds like a feature

[champnic]

@rishabgt Do you have a minimum repro which demonstrates this issue? I'm not sure what this polyfill is doing, but async javascript is generally supported in WebView2.

I'd also recommend you to create and manage the popup window on the native side using a separate WebView2.

[rishabgt]

@rishabgt Do you have a minimum repro which demonstrates this issue? I'm not sure what this polyfill is doing, but async javascript is generally supported in WebView2.

• I'll try to create something similar if possible (not sure how long that would take for me).

I'd also recommend you to create and manage the popup window on the native side using a separate WebView2.

• I am currently using the WebView2 enabled application to run a large-scale application in embedded mode. The entire application is coded in HTML/CSS/Javascript, and it just uses the WebView2 similar to an embedded browser. Can you provide more details on how I would tackle this?

[rishabgt]

Meanwhile I am adding a dummy code to demonstrate the kind of flow its happening in the real application.
The freezing issue is happening in my application when there is a similar flow that I have shown below,

async function f1(){
    var condition,value;
    condition = true;
    if(condition){
        value = await someOtherFunction();
    }
    console.log(value);
}

function someOtherFunction(){
    returnValue = window.showModalDialog(a,b,c); //This returns a promise
    return returnValue;
}

f1();