Uncaught (in promise) TypeError: Document not active

Issue

I have a button that allows you to open a window in full screen mode. And there is a bug. If you click on the button and open the full-screen mode of the window. And then press the ESC button to exit full-screen mode and then press the button again, such an error will occur.

Uncaught (in promise) TypeError: Document not active

at FullScreenService.closeFullscreen

Is there any way to fix this error?

isOpenFullScreen: boolean;

fullscreen() {
  if (!this.isOpenFullScreen) {
    this._fullscreen.openFullscreen();
    this.isOpenFullScreen = true;
  } else {
    this._fullscreen.closeFullscreen();
    this.isOpenFullScreen = false;
  }
}

Solution

The problem is that when you press the ESC button, the property isOpenFullScreen is not change back to false. Try to use document.fullscreenElement and change your fullscreen method as follows.

// isOpenFullScreen: boolean; // not needed

fullscreen() {
  if (document.fullscreenElement === null) {
    this._fullscreen.openFullscreen();
  } else {
    this._fullscreen.closeFullscreen();
  }
}

Maybe it's better to add a method to your service that indicates if you're currently in full-screen mode.

Answered By - uminder