[bug] webview.close not allowed

[martalewan]

Describe the bug

In my react app when I create the Webview in a variable and try to close() it afterwards, I get a permission error although I already added webview:allow-webview-close permission.

This is the error thrown up "webview.close not allowed. Permissions associated with this command: ". The needed permission is missing in the messages in contrast to other permission errors I got in other APIs. Can someone help guide me on this?

Also when I call a function and create a WebView inside the main window. But when I check all webviews using getAll, I can't see newly created webview. There is only the main webview that runs the React app in the webview array. Any idea why is it not added to the webviews list?

Reproduction

let webview: Webview | null = null;

const setWebView = async (props: WebViewProps) => {
  const appWindow = getCurrent();
  const uniqueLabel = "theUniqueLabel";

  webview = new Webview(appWindow, uniqueLabel, {
    url: "https://beta.tauri.app/",
    x: 0,
    y: 0,
    width: 500,
    height: 500,
  });
};

const removeWebView = async () => {
  webview?.close();
};

Expected behavior

Able to close created webview. List of all webview is available.

Full tauri info output

"webview.close not allowed. Permissions associated with this command: ".

Stack trace

No response

Additional context

No response

[david-mkl]

I think my use case is different than yours (my use case is for the window to close itself - sounds like you may be trying to have your main window close the sub-window).

This is what I did as a workaround for now. Basically use window instead of webview.

In the capabilities file for the window,

{
  "permissions": [
    "window:allow-close"
  ]
}

Then on the frontend

import { getAll } from "@tauri-apps/api/window"

// ...

const onClose = () => {
  getAll().find((w) => w.label === "your-window-label")?.close()
}

// ...
<button onClick={onClose}>Close the Window!</button>

For your use case, you may be able to send an event from your main window to the sub-window and tell it to close itself.

[minhypro]

I also faced this problem. Capabilities: "webview:allow-create-webview", "webview:allow-webview-close",

create webview:

async function createWebview() {
  const appWindow = getCurrentWindow();
  const appInnerSide = await appWindow.innerSize();
  const webview = new Webview(appWindow, "my-label", {
    url: "",
    height: appInnerSide.height - 50,
    width: appInnerSide.width,
    x: 0,
    y: 50,
  });
}

close webview:

const closeWebview = async () => {
  const webviews = getAllWebviews();
  const customWebview = webviews.find(
    (webview) => webview.label === "my-label"
  );
  customWebview?.close();
};

Then onclick throw this error Uncaught (in promise) webview.close not allowed. Permissions associated with this command:

Any idea how to fix it?

[nomandhoni-cs]

@minhypro Today, I was facing the same problem with WebViewWindow, my window label is ReminderWindow so I added this, Your window label could be Different.

I solved this by adding my window label in the capabilities/default.json

"windows": [
    "main", "ReminderWindow"
  ],

So this works for my ReminderWindow as well and

{
  "permissions": [
    "window:allow-close"
  ]
}

If you want Here is my full code How I am closing the window

import { Button } from "../ui/button";
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";

const appWindow = getCurrentWebviewWindow();
const Reminder = () => {
  return (
    <div className="bg-black">
      <div>Reminder: Take a break!</div>
      <Button onClick={() => appWindow.close()}> Skip This Time</Button>
    </div>
  );
};

export default Reminder;

[minhypro]

@minhypro Today, I was facing the same problem with WebViewWindow, my window label is ReminderWindow so I added this, Your window label could be Different.

I solved this by adding my window label in the capabilities/default.json

"windows": [
    "main", "ReminderWindow"
  ],

So this works for my ReminderWindow as well and

{
  "permissions": [
    "window:allow-close"
  ]
}

If you want Here is my full code How I am closing the window

import { Button } from "../ui/button";
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";

const appWindow = getCurrentWebviewWindow();
const Reminder = () => {
  return (
    <div className="bg-black">
      <div>Reminder: Take a break!</div>
      <Button onClick={() => appWindow.close()}> Skip This Time</Button>
    </div>
  );
};

export default Reminder;

Thank you @nomandhoni-cs , but you're closing the WebviewWindow which works. I faced the issue with closing Webview