Three.js: OrbitControls should get keyboard events from the element?

[greggman]

Description of the problem

The current OrbitControls get keydown events from window which has issue if there are any text input elements.

Steps to repo

1. https://jsfiddle.net/greggman/xz73t9gc/
2. click in text area
3. type stuff and press left right arrow gets text area

Notice OrbitControls are responding to arrow keys

It seems like the solution is 4 fold

1. Pass renderer.domElement into OrbitControls
2. Have OrbitControls put keydown on scope.domElement which is either document or the element passed in

3. Set scope.domElement.tabIndex >= 0. This could happen in OrbitControls or be left to the user

   This lets the canvas get selected. Without this the canvas can never get keyboard input since it can never be the focus

4. Optional: set CSS canvas:focus { outline: none; }

Doing steps all these steps allows it to work correctly

https://jsfiddle.net/greggman/gywcao3e/

In the code above the OrbitControls are pasted at the bottom. the window.addEventListener('keydown', ...) has been changed do scope.domElement.addEventListener('keydown', ...) and if scope.domElement is not the body then if its tabIndex is < 0 it's set to 0.

This seems to fix the issue and still seems to work as it used to if no element is passed in

Three.js version

• [X] Dev

Browser

• [x] All of them

OS

• [x] All of them

Hardware Requirements (graphics card, VR Device, ...)

[WestLangley]

I agree this is a pain in the neck. How about:

controls.enableKeys = false;

It's janky, anyway. Does anybody use the keys for panning?

[greggman]

That a cool option too but there's still the question of why always attach to window

If you attach to scope.domElement instead then users can work around the rest and it seems like you get the same behavior as your currently getting but still let users work around the issues

[WestLangley]

File a PR and let's try it. :-)

[Mugen87]

Related: #15834

[Mugen87]

Fixed via #17819