javascripthtmlgoogle-chrome-extensionevent-handlinghtml5-fullscreen

requestFullscreen() not working with modifier keys inside keyup event

I want to toggle fullscreen on an element, but the requestFullscreen() function isn't working, despite the fact it is called while responding to user interaction (MDN). I can't find out why it doesn't work with Modifier Keys (MDN).

Here's the snippet from my fiddle:

document.addEventListener("keyup", (e) => {
  e.preventDefault();
  if (document.fullscreenElement)
    return document.exitFullscreen()
  document.body.firstElementChild.requestFullscreen();  // Fails on CTRL, SHIFT, ALT ...
});

I also don't understand how it does work if you press a mouse button or any other key press between each toggle with CTRL, SHIFT, or ALT keys. For example, this would work: Left Mouse Click, Shift, Shift, Left Mouse Click, Shift, Shift...

I need this to work for my Chrome Extension, so maybe there is a workaround? Thanks.

Solution

  • Updated MDN docs - Features gated by user activation - specify exactly what activation triggering input events require. In short, the Esc key and shortcut keys reserved by the user agent (aka modifier keys) don't trigger transient activation. There is no workaround.