Feature request: exit manually

[Enoooch]

Add prop to remove listener of key esc.

Escape might conflict with other key bindings.

[mirari]

Do you mean the act of pressing esc to exit fullscreen? This is controlled by the browser. Only the pageOnly option that is automatically enabled when the browser does not support the fullscreen api simulates this action.

[Enoooch]

Yes, when pageOnly is enabled.

Sorry for not making it clear.

[mirari]

I would like to know what the exact behavior of the conflict is like. The binding and unbinding of event listeners are both passed specific function, they shouldn't affect other listener behavior.

const keypressCallback = (e) => {
  if (e.key === 'Escape') {
    document.removeEventListener('keyup', keypressCallback)
    this.exit()
  }
}
document.removeEventListener('keyup', keypressCallback)
document.addEventListener('keyup', keypressCallback)

[Enoooch]

If I also have a dialog with [Escape] key binding inside this fullscreen content.

[mirari]

If you don't use pageOnly, this event listener may also trigger the browser to exit the fullscreen, maybe you can use e.stopPropagation to stop the event from bubbling.

[Enoooch]

In my case, I may have other teleport content such as el-dialog which also enable key escape to close dialog. And that's the conflict is.

So, I would rather pass a prop to disable esc event listeners, and add a button to call exit manually.

<fullscreen ref="contextRef" v-model="isFullscreen" :teleport="true" :page-only="true" :close-on-press-escape="false">
  <button @click="() => contextRef.exit()" />
  ......
</fullscreen>

[mirari]

If you don't use pageOnly, does the full screen exit when you press Esc button in a dialog? Adding such an option would become confusing and difficult to describe, since it doesn't actually prevent the browser from acting by default.

[Enoooch]

Whether by setting pageOnly or not, it always exit when press Esc in a dialog.

[mirari]

So adding this option doesn't completely solve the problem, because the browser's behavior can't be prevented.

[Enoooch]

Yeah, I'm aware of that we can't change the behavior in browser's fullscreen, but we can control it when pageOnly is enabled.

This feature only needed in rare cases. But it still conflict with other components that has Escape key bindings.

Thanks for responding, if there is still a no go, I will close this issue.

[mirari]

You can use this to avoid triggering the listener event on the document.

document.addEventListener("keyup", (e) => {
  if (e.key === "Escape") {
    e.stopImmediatePropagation();
  }
});

[Enoooch]

Thanks, I will apply this instead.