OrbitControls keydown events not firing

Describe the bug

the keydown event is attached to the dom node as should be, but when you use the arrow keys no event is fired. I can see in the PR #17819 that you added the following code:

if ( scope.domElement.tabIndex === -1 ) {
  scope.domElement.tabIndex = 0;
}

but in the latest release r123, this code is no longer there. If I re-add the code above the keydown events work as expected. After some digging I can see in #20617 this issue is known, but i’ve already written this bug so at least it’s visible to others.

If I understand right, is it that the canvas isn’t focussed so the keydown events don’t fire? I’m happy to work on a PR to fix this.

To Reproduce

Steps to reproduce the behavior:

1. Go to - https://threejs.org/examples/?q=controls#misc_controls_orbit
2. try use the arrow keys

Expected behavior

The keydown events should fire moving the camera.

Platform:

• Device: [Desktop, Mobile] desktop
• OS: [Windows, MacOS, Linux, Android, iOS] macOS
• Browser: [Chrome, Firefox, Safari, Edge] chrome/firefox
• Three.js version: r123

[WestLangley]

@TiagoCavalcante OrbitControls listens for arrow keys, not WASD.

Do this:

controls.listenToKeyEvents( window );

controls.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' };

[mrdoob]

I just try to look at this issue from the perspective of an average three.js user. I fear the additional call of listen*() methods could be considered as inconvenient. Especially if one says it “worked before without issues”

Yeah, but I think it’s not too bad and teaches the user about pointer events.

Also, code editors also gave me issues when doing this:

var controls = new THREE.OrbitControls( camera );

They would complain that controls is not used and had to do this:

new THREE.OrbitControls( camera );

Which was always weird 😅