Full screen is not toggled when exiting full screen using the browser interface with fullscreenElement

[rbertucat]

When specifying the Dom element to render in full screen using fullscreenElement, and exiting the full screen mode either by pressing ESC or by using the browser "X" button, the full screen is not toggled.

It seems like the event _handleFullscreenChange doesn't update properly. https://github.com/brunob/leaflet.fullscreen/blob/f1a6ca62e90a5742cd5e39d31190cfc9be34eb48/Control.FullScreen.js#L256

It seems like the condition ev.target === map.getContainer() should be updated to consider fullscreenElement instead of map.getContainer().

[brunob]

Nice catch, would you like to provide a PR to fix that ?

[rbertucat]

Bruno, thanks for the suggestion! Unfortunately, I won’t be able to provide a PR for this at the moment.

[brunob]

This simple patch should do the job, any thought @BePo65 & @KristjanESPERANTO ?

diff --git a/Control.FullScreen.js b/Control.FullScreen.js
index e90484a..f43dff3 100644
--- a/Control.FullScreen.js
+++ b/Control.FullScreen.js
@@ -255,7 +255,7 @@
 
 		_handleFullscreenChange(ev) {
 			const map = this._map;
-			if (ev.target === map.getContainer() && !this._screenfull.isFullscreen && !map._exitFired) {
+			if (ev.target === (this.options.fullscreenElement || map.getContainer()) && !this._screenfull.isFullscreen && !map._exitFired) {
 				this._screenfull.exit().then(() => map.invalidateSize());
 				map.fire('exitFullscreen');
 				map._exitFired = true;

[BePo65]

I do not completely understand when the problem occurs. @rbertucat could you show the html and js you used to generate the map? Do you use a programming framework like react or angular?

I created a minimal demo to reproduce the issue at stackblitz, but I can see no problem with entering and exiting the fullscreen mode.

[rbertucat]

@BePo65, somehow stackblitz doesn't allow me to run the example in its own windows.

The error really occurs when you use fullscreenElement, and when you exit the full screen mode either by pressing ESC or by using the browser "X" button.

[BePo65]

somehow stackblitz doesn't allow me to run the example in its own windows. I know this problem all too well ;-(

map.getContainer() should always return the container of the map (i.e. html element to set / reset to fullscreen), but I have to admit that I never used this feature.

What do you use as a container? Can you provide the relevant part of your application? This should help me reproduce the problem 😄 .