1618248 - Fullscreen blocked when triggered by keyboard shortcut

Status: UNCONFIRMED

(Core :: DOM: Core & HTML, defect, P3)

Description

[Matthew]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:73.0) Gecko/20100101 Firefox/73.0

Steps to reproduce:

Trying to give users the ability to enter fullscreen from a keyboard shortcut.

(Using React)

  useEffect(() => {
    function handleKeyPress(e) {
      switch (e.key) {
        case 'ArrowRight': {
          if (currSlide < slides.length - 1) {
            history.push(`${currSlide + 1}`)
          }
          break
        }
        case 'ArrowLeft': {
          if (currSlide > 0) {
            history.push(`${currSlide - 1}`)
          }
          break
        }
        case 'ArrowUp': {
          const curr = containerRef.current
          if (curr) {
            if (!document.fullscreenElement) {
              curr
                .requestFullscreen()
                .catch(err => console.error(err))
            } else {
              document.exitFullscreen()
            }
          }
          break
        }
        default: {}
      }
    }

    window.addEventListener('keyup', handleKeyPress)

    return () => {
      window.removeEventListener('keyup', handleKeyPress)
    }
  }, [currSlide, history])

It works roughly 25% of the time, but I don't see any pattern suggesting what the actual issue is.

Actual results:

About 25% of the time, the keyboard shortcut works as expected. I can toggle fullscreen mode.

About 75% of the time, I get blocked: "Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler."

I don't know exactly what that means, but it is in fact getting called by the "keyup" event handler.

Expected results:

I would expect it to fail 100% with an error message that explains how I can fix the problem or, preferably, succeed 100% of the time.

Comment 1

[Edgar Chen [:edgar]]

(In reply to Matthew from comment #0)

About 75% of the time, I get blocked: "Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler."

The error means the fullscreen is blocked due to it is not generated by a user event, see step 6 of https://fullscreen.spec.whatwg.org/#dom-element-requestfullscreen.

For keyboard event, we set user-activation flag in keydown event, see https://searchfox.org/mozilla-central/rev/6cd54550a27e2f6ca0755a25328f769e41e524f4/dom/events/EventStateManager.cpp#756-758, and only lasts for 5 sec.
So one possible situation is that it takes more than 5 sec to call the fullscreen API after user trigger the keyboard shortcut, but it depends on what web page actually does. Is it possible have a minimal script to reproduce this issue?

but it is in fact getting called by the "keyup" event handler.

And what if you move the fullscreen request to 'keydown' event handler?

Comment 2

[Edgar Chen [:edgar]]

(In reply to Edgar Chen [:edgar] from comment #1)

but it is in fact getting called by the "keyup" event handler.

And what if you move the fullscreen request to 'keydown' event handler?

Sorry, please ignore comment #1, I believe the behavior in comment #0 is due to the Arrow key isn't be treated as user activation in Gecko.
It works sometimes is because of the user activation triggered by other event isn't timed out yet.

Comment 3

[rodrigorivascosta]

I can confirm this issue. In my case I want to use F11 to do the fullscreen of a canvas, using event.preventDefault() to prevent the browser from going fullscreen itself. But if fails just as the OP.

Changing F11 to Key_A, for example, works every time, while changing to ArrowRight fails randomly.

That "fails randomly" seems to be as @edgar comments: if I click anywhere in the page or if I press a letter key, then just for the next 5 seconds the F11-fullscreen will be accepted.