requestPointerLock() not working inside of Vue.js component

Question

I am trying to use requestPointerLock() inside of a Vue.js component. If the pointerShouldLock data item of my component is true, the pointer should get locked during the beforeUpdate() lifecycle hook. My code looks like this:

beforeUpdate() {
    if (this.pointerShouldLock) {
        const gameScreen = document.getElementById('game-screen')
        requestPointerLock(gameScreen)
    }
}

The requestPointerLock() function looks like this:

requestPointerLock = element => {
    element.requestPointerLock =
        element.requestPointerLock || element.mozRequestPointerLock        
    element.requestPointerLock()
}

This technique works fine with React or vanilla JS, however when using Vue.js, the pointer does not get locked. Instead, a pointerlockerror event gets triggered.

I've also tried using the updated() lifecycle hook, but this also doesn't work.

Does anybody have an idea why it's not possible to successfully request the pointer lock from inside of a Vue.js component?

That's really unfortunate reviewers told you to delete your answer... Your edit is the answer, here is the [link to specs](https://w3c.github.io/pointerlock/#x3-glossary) that sits it. I voted to undelete your answer, but you should probably repost a new one, avoiding forbidden words like *"Update"* since this is not an update, but a real answer (and the correct one). Feel free to include citations from the specs too. — Kaiido, Nov 27 '17 at 14:23

score 1 · Accepted Answer · answered Nov 27 '17 at 15:12

According to the specifications, requestPointerLock() can only be triggered by a valid engagement gesture (for example a click event). Requesting pointer lock programmatically without user interaction is not possible. See the specs for further information.

requestPointerLock() not working inside of Vue.js component

1 Answers1