Pressing escape immediately during fullscreen breaks toggleFullscreen

[webdobe]

Just wanted to state thank you for this project.

I am running into an issue where if I press escape immediately after pressing a button that is hooked to "toggleFullscreen" the component still believes the fullscreen is active. Which for whatever reason will not allow you to toggleFullscreen again.

[webdobe]

setTimeout(function () {
                            _this2.setState({
                                isFullscreen: true,
                                viewportDimensions: (0, _getViewportDimensions2.default)()
                            }, function () {
                                _this2.props.onFullscreenChange(true);
                            });
                        }, 500);

The timeout seems to break it. Basically if you hit escape within the 500 ms it will break functionality. It may be nice to lower this or have it configurable.

[ggingell]

I agree, that's a bug. Thanks for reaching out. I might be able to look at it Thursday or Friday, but then I'm off to watch the eclipse until ~Tuesday. Bad timing, sorry about that. I'll let you know as soon as it's fixed. 

[ggingell]

Is there a specific browser / OS where you see this occurring? I assume you are not attaching an event listener for Escape and this is the native behavior?

[webdobe]

I am on Ubuntu 16.04 / Chrome. But it is likely not browser specific. I am not attaching an event listener for escape.

Essentially when you press escape within that 500 ms delay. It sets "isFullscreen" to true and the just bugs out. The provided toggle function no longer works.

[ggingell]

Okay, I've reworked the way that callback behaves to now set state immediately. I isolated the viewing dimensions update to a setTimeout for 300ms that only runs if the state.isFullscreen is true. It seems like the viewport dimensions (window.innerWidth etc) can be unreliable until after ~300ms so it's the only way to get the correct values. As it turns out though viewportDimensions is kind of useless. Fullscreenable positions itself absolute so the inner element simply needs height: 100%; when in fullscreen. The transition also looks good coming from any initial height. I may just get rid of viewportDimensions for native fullscreen. Not sure yet.

You can install the tagged version using:

npm i react-fullscreenable@issue2

Let me know how this behaves. If it's still buggy I'll setup an ubuntu VM and dig in.

[webdobe]

Nice @ggingell this resolves the issue! Thank you for the quick turn around. Even seems to have a little better performance when going into fullscreen.

[ggingell]

Awesome! The fix is now published in version 2.4.2.