Open Bug 1618248 Opened 2 years ago Updated 2 years ago

Fullscreen blocked when triggered by keyboard shortcut

Categories

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

73 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: matthew.c.tx, Unassigned)

References

(Blocks 1 open bug)

Details

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.

Blocks: 687687
Component: Untriaged → DOM: Core & HTML
Product: Firefox → Core
Flags: needinfo?(echen)
Blocks: 1577516

(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?

Flags: needinfo?(echen) → needinfo?(matthew.c.tx)
Severity: normal → S3
Priority: -- → P3

(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.

Flags: needinfo?(matthew.c.tx)
You need to log in before you can comment on or make changes to this bug.