Improvements for DOM input capture, allows text input handling. Preve…

…nts setPointerCapture. See https://github.com/orgs/scenerystack/discussions/38

js/input/EventContext.ts

@@ -27,10 +27,10 @@ export default class EventContext<out DOMEvent extends Event = Event> {
   }
 
   /**
-   * DOM (Scenery) nodes set dataset.noPreventDefault on their container if they don't want preventDefault to be called.
-   * We search up the tree to detect this.
+   * DOM (Scenery) nodes set dataset.sceneryAllowInput on their container if they don't want preventDefault to be called,
+   * or other effects that block input (e.g. setPointerCapture). We search up the tree to detect this.
    */
-  public hasNoPreventDefault(): boolean {
+  public allowsDOMInput(): boolean {
     const target = this.domEvent?.target;
 
 
@@ -39,7 +39,7 @@ export default class EventContext<out DOMEvent extends Event = Event> {
 
       while ( element ) {
         // For DOM nodes, we can check for a data attribute
-        if ( element instanceof HTMLElement && element.dataset?.noPreventDefault === 'true' ) {
+        if ( element instanceof HTMLElement && element.dataset?.sceneryAllowInput === 'true' ) {
           return true;
         }
 

js/input/Input.ts

@@ -880,7 +880,7 @@ export default class Input extends PhetioObject {
       !( this.passiveEvents === true ) &&
       ( callback !== this.mouseDown || platform.edge ) &&
       batchType !== BatchedDOMEventType.ALT_TYPE &&
-      !context.hasNoPreventDefault()
+      !context.allowsDOMInput()
     ) {
       // We cannot prevent a passive event, so don't try
       context.domEvent.preventDefault();
@@ -1386,7 +1386,7 @@ export default class Input extends PhetioObject {
     // this element (it will bubble). See https://github.com/phetsims/scenery/issues/464 and
     // http://news.qooxdoo.org/mouse-capturing.
     const target = this.attachToWindow ? document.body : this.display.domElement;
-    if ( target.setPointerCapture && context.domEvent.pointerId ) {
+    if ( target.setPointerCapture && context.domEvent.pointerId && !context.allowsDOMInput() ) {
       // NOTE: This will error out if run on a playback destination, where a pointer with the given ID does not exist.
       target.setPointerCapture( context.domEvent.pointerId );
     }

js/nodes/DOM.ts

@@ -250,7 +250,7 @@ export default class DOM extends Node {
   public isInputAllowed(): boolean { return this._allowInput; }
 
   private invalidateAllowInput( allowInput: boolean ): void {
-    this._container.dataset.noPreventDefault = allowInput ? 'true' : 'false';
+    this._container.dataset.sceneryAllowInput = allowInput ? 'true' : 'false';
     this._container.style.pointerEvents = allowInput ? 'auto' : 'none';
   }
 

tests/sandbox.html

@@ -196,8 +196,7 @@
     width: 1,
     height: 1,
     accessibility: true,
-    listenToOnlyElement: true,
-    allowCSSHacks: false
+    listenToOnlyElement: true
   } );
 
   const isDescendant = function (parent, child) {