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.