element.requestFullscreen() not working in electron 18.2

Question

I have a VueJS2 app inside Electron 18.2 and and I want to make a div full screen when the user presses a button.

I am using this code

 console.log("fullscreenEnabled", document.fullscreenEnabled)
  if (!document.fullscreenElement) {
    if (this.$refs["container"].requestFullscreen) {
      this.$refs["container"]
        .requestFullscreen()
        .then(() => console.log("fullscreen works"))
        .catch(e => console.log("toggleFullscreen error", e))
    }
  } else {
    console.log("exit")
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }

this.$refs["container"] is the div I want to full screen and it has value document.fullscreenEnabled returns true

I tested this code in a clean electron project of the same version and there it works, 100% the same code.

What happens is that nothing is displayed in console and the div doesn't go fullscreen, neither then or catch triggers, there are no actions when clicking on the button. The method is called with @click="toggleFullScreen"

What could be the cause ? Does electron has some settings that could have been changed to block the fullscreen API ? I didn't made the project, I just have to add this function to it.

The projoect is made with VueJS2, Nuxt2, Electron 18.2 and Vuetify

Thank you.

Answer 1

I found the problem. I should have allowed permissions for fullscreen in the main file after the app is ready

session.defaultSession.setPermissionRequestHandler(
        (webContents, permission, callback, details) => {
            if (permission === "fullscreen") {
                callback(true);
            }
        }
    );