CODEWITHSUNDEEP
visual-studio-codevscode-extensions
John Kears
John Kears

Reputation: 867

Workaround to allow Popups in VSCode WebView Extension

We have created a unique VSCode WebView extension, strictly for our own internal use. This WebView provides the ability to capture Domain Driven Design models that are code generated into Microservice API. One of the type editors we added supports JSON Schema, and we utilized an OpenSource React component to implement this editor. We were extremely careful to not implement any popups with the WebView extension however this JSON Schema editor does implement a number of modal dialogs which do not surface when inside our custom VSCode WebView extension.

I am looking for a workaround to the restriction in VSCode WebView Extension.

enter image description here

Upvotes: 3

Views: 3419

Answers (3)

Matt Bierner
Matt Bierner

Reputation: 65663

VS Code intentionally blocks modals in webviews. See this issue for more details on why but in summary:

  • Webviews should not be able to break out and effect the rest of the editor experience (in part because webviews allow running potentially untrusted code that was not installed with the extension)
  • Native modals don't fit in with the rest of the VS Code UI and are severely limited in what they can do.

The correct way to collect user input from a webview is to send a message from your webview back to your extension that invokes VS Code's normal UI APIs—such as showQuickPick or showInformationMessage. If the library you are using does not allow you to inject a custom prompting method, then you could try overriding globals such as window.alert() to hook them up to the corresponding VS Code API

Upvotes: 3

user11832378
user11832378

Reputation: 1

You are correct. To resolve this issue we are changing to sliding windows. This does work. It's a shame that this restriction exists as it will limit the use of 3rd party controls that rely on user interaction through modal dialog.

Upvotes: 0

Manpreet Singh
Manpreet Singh

Reputation: 158

As far as I know, Currently vscode webview blocks popups by default, the only way to use modal/popup in webview is by using vscode.window.showInformationMessage("message",{modal:true}) which either resolves or rejects based on user action.

Upvotes: 2

Related Questions