fix(renderwindowinteractor): observe KeyPress events on RW container instead of document

Observing on document produces many false positives. For example, a key press event was for an
<input> element but RWI was also processing it.

BREAKING CHANGE: This may break key press event current behavior.
tabIndex=0 is now added on RW containers.

fix #1856

Author: finetjul

BREAKING_CHANGES.md

@@ -1,3 +1,7 @@
+## From 32.x to 33
+
+- **vtkRenderWindowInteractor**: KeyPress, KeyDown and KeyUp events are now observed on the container and no longer on the document. "tabIndex=0" is now automatically added on RWI containers to give focus on your render windows and catch key events. Check the KeyPressEvents example for usage.
+
 ## From 31.x to 32
 
 - **vtkMapper**: remove `mapScalarsToTexture` from the public API. The function becomes protected and its API changes. This shouldn't cause any issue in most cases.

Documentation/content/docs/gallery/KeyPresEvents.jpg

@@ -326,6 +326,7 @@ This will allow you to see the some live code running in your browser. Just pick
 [![InteractorStyleTrackballCamera Example][InteractorStyleTrackballCamera]](./InteractorStyleTrackballCamera.html "InteractorStyleTrackballCamera")
 [![InteractorStyleUnicam Example][InteractorStyleUnicam]](./InteractorStyleUnicam.html "InteractorStyleUnicam")
 [![KeyboardCameraManipulator Example][KeyboardCameraManipulator]](./KeyboardCameraManipulator.html "KeyboardCameraManipulator")
+[![KeyPressEvents Example][KeyPressEvents]](./KeyPressEvents.html "KeyPressEvents")
 [![MouseRangeManipulator Example][MouseRangeManipulator]](./MouseRangeManipulator.html "MouseRangeManipulator")
 [![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html "PiecewiseGaussianWidget")
 [![TimeStepBasedAnimationHandler Example][TimeStepBasedAnimationHandler]](./TimeStepBasedAnimationHandler.html "TimeStepBasedAnimationHandler")

Documentation/content/examples/index.md

@@ -0,0 +1,51 @@
+<style>
+    #view-1:focus {
+      outline: none; /* remove default */
+      box-shadow: 0 0 20px 10px rgba(0, 255, 0, 0.6); /* red glow */
+      z-index: 1; /* move forward (works only if position!=static) */
+      position: relative;
+    }
+    #view-2:focus, #view-2:focus-visible {
+      outline: none; /* remove default */
+    }
+
+    input:focus {
+      outline: none;
+      border: 2px solid teal;
+      box-shadow: 0 0 4px teal;
+    }
+
+    /* Optional: Use focus-visible for keyboard-only styling */
+    select:focus-visible {
+      outline: 3px dashed orange;
+    }
+  </style>
+<h3>Click or press tab until you "focus" a render window, then type keys (e.g. r, w, s)</h3>
+<table>
+  <tr>
+    <td>Click with mouse then press space key:</td>
+    <td>
+      <input type="checkbox" id="checkboxTranslation" checked>
+    </td>
+  </tr>
+  <tr>
+    <td>Click then key up and down :</td>
+    <td><input id='slider' type="range" min="0" max="255" step="1" value="255" style="width: 100px;"/></td>
+  </tr>
+  <tr>
+    <td>Use key up and down to browse through:</td>
+    <td>
+      <select id="select">
+        <option>One</option>
+        <option>Two</option>
+        <option selected="selected">Three</option>
+        <option>Four</option>
+      </select>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <button id="buttonReset">Click and press space key</button>
+    </td>
+  </tr>
+</table>

Examples/Rendering/KeyPressEvents/controlPanel.html

@@ -0,0 +1,65 @@
+import '@kitware/vtk.js/favicon';
+
+// Load the rendering pieces we want to use (for both WebGL and WebGPU)
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
+import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+
+import controlPanel from './controlPanel.html';
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const container = document.querySelector('body');
+const controlContainer = document.createElement('div');
+controlContainer.innerHTML = controlPanel;
+container.appendChild(controlContainer);
+
+global.RWIs = [];
+
+const logs = document.createElement('pre');
+
+const cone = vtkConeSource.newInstance();
+
+for (let i = 0; i < 3; ++i) {
+  const elementParent = document.createElement('div');
+  elementParent.style.width = '33%';
+  elementParent.style.height = '300px';
+  elementParent.style.display = 'inline-block';
+
+  const element = document.createElement('div');
+  element.setAttribute('id', `view-${i}`);
+  element.style.width = '100%';
+  element.style.height = '100%';
+  element.tabIndex = 0;
+  elementParent.appendChild(element);
+
+  container.appendChild(elementParent);
+
+  const grw = vtkGenericRenderWindow.newInstance();
+
+  const color = [0, 0, 0];
+  color[i % 3] = 1;
+  grw.getRenderer().setBackground(color);
+
+  const mapper = vtkMapper.newInstance();
+  mapper.setInputConnection(cone.getOutputPort());
+  const actor = vtkActor.newInstance();
+  actor.setMapper(mapper);
+  grw.getRenderer().addActor(actor);
+  grw.getRenderer().resetCamera();
+
+  grw.setContainer(element);
+  grw.resize();
+
+  global.RWIs.push(grw.getInteractor());
+  // Pick on mouse right click
+  grw.getInteractor().onKeyDown((callData) => {
+    logs.textContent += `Pressed ${callData.key} on RWI #${i}\n`;
+  });
+}
+container.appendChild(logs);

Examples/Rendering/KeyPressEvents/index.js

@@ -974,6 +974,12 @@ export interface vtkRenderWindowInteractor extends vtkObject {
   /**
    * Add an HTMLElement as the new container for the interactor.
    * All events will be bound to this new container.
+   * 
+   * container will gain the tabIndex=0 attribute to catch keyboard events.
+   * container must have focus (manually via click or tab, or programmatically
+   * via `.focus()`) to receive keypress events
+   * Outline on focus can be customized with CSS :focus pseudo-class.
+   * 
    * Any old container will be removed along with its listeners.
    */
   setContainer(container: Nullable<HTMLElement>): boolean;

Sources/Rendering/Core/RenderWindowInteractor/index.d.ts

@@ -237,15 +237,18 @@ function vtkRenderWindowInteractor(publicAPI, model) {
     });
     container.addEventListener('pointerup', publicAPI.handlePointerUp);
     container.addEventListener('pointercancel', publicAPI.handlePointerCancel);
-    document.addEventListener('keypress', publicAPI.handleKeyPress);
-    document.addEventListener('keydown', publicAPI.handleKeyDown);
+    container.addEventListener('keypress', publicAPI.handleKeyPress);
+    container.addEventListener('keydown', publicAPI.handleKeyDown);
+    // Observe keyup on document in case the focus changes
+    // between keydown and keyup.
     document.addEventListener('keyup', publicAPI.handleKeyUp);
 
     document.addEventListener(
       'pointerlockchange',
       publicAPI.handlePointerLockChange
     );
 
+    container.tabIndex = 0; // to receive key events
     // using touchAction is more performant than preventDefault
     // in a touchstart handler.
     container.style.touchAction = 'none';
@@ -307,8 +310,8 @@ function vtkRenderWindowInteractor(publicAPI, model) {
         publicAPI.handlePointerCancel
       );
     }
-    document.removeEventListener('keypress', publicAPI.handleKeyPress);
-    document.removeEventListener('keydown', publicAPI.handleKeyDown);
+    container.removeEventListener('keypress', publicAPI.handleKeyPress);
+    container.removeEventListener('keydown', publicAPI.handleKeyDown);
     document.removeEventListener('keyup', publicAPI.handleKeyUp);
     document.removeEventListener(
       'pointerlockchange',