From 786d7e4f55a706e28091205198394eb1a7156d13 Mon Sep 17 00:00:00 2001
From: Michael Kauzmann <michael.kauzmann@colorado.edu>
Date: Wed, 26 Oct 2022 16:21:04 -0600
Subject: [PATCH] attach globalKeyStateTracker listeners via scenery input,
 https://github.com/phetsims/scenery/issues/1445

---
 js/accessibility/KeyStateTracker.ts       |  4 ++--
 js/accessibility/globalKeyStateTracker.ts |  1 -
 js/input/BrowserEvents.js                 | 13 ++++++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/js/accessibility/KeyStateTracker.ts b/js/accessibility/KeyStateTracker.ts
index 7e5c57c36..fa12a1b86 100644
--- a/js/accessibility/KeyStateTracker.ts
+++ b/js/accessibility/KeyStateTracker.ts
@@ -382,8 +382,8 @@ class KeyStateTracker {
     const addListenersToDocument = () => {
 
       // attach with useCapture so that the keyStateTracker is updated before the events dispatch within Scenery
-      window.addEventListener( 'keyup', this.documentKeyupListener!, true );
-      window.addEventListener( 'keydown', this.documentKeydownListener!, true );
+      window.addEventListener( 'keyup', this.documentKeyupListener!, { capture: true } );
+      window.addEventListener( 'keydown', this.documentKeydownListener!, { capture: true } );
       this.attachedToDocument = true;
     };
 
diff --git a/js/accessibility/globalKeyStateTracker.ts b/js/accessibility/globalKeyStateTracker.ts
index 922f02e98..b535d5cb5 100644
--- a/js/accessibility/globalKeyStateTracker.ts
+++ b/js/accessibility/globalKeyStateTracker.ts
@@ -15,7 +15,6 @@ import { KeyStateTrackerOptions } from './KeyStateTracker.js';
 class GlobalKeyStateTracker extends KeyStateTracker {
   public constructor( options?: KeyStateTrackerOptions ) {
     super( options );
-    this.attachToWindow();
   }
 }
 
diff --git a/js/input/BrowserEvents.js b/js/input/BrowserEvents.js
index 6b84317f5..bf4f638da 100644
--- a/js/input/BrowserEvents.js
+++ b/js/input/BrowserEvents.js
@@ -8,11 +8,14 @@
 
 import arrayRemove from '../../../phet-core/js/arrayRemove.js';
 import platform from '../../../phet-core/js/platform.js';
-import { BatchedDOMEventType, Display, Features, PDOMUtils, scenery } from '../imports.js';
+import { BatchedDOMEventType, Display, Features, globalKeyStateTracker, PDOMUtils, scenery } from '../imports.js';
 
 // Sometimes we need to add a listener that does absolutely nothing
 const noop = () => {};
 
+// Ensure we only attach global window listeners (display independent) once
+let isGloballyAttached = false;
+
 const BrowserEvents = {
   /**
    * Adds a Display to the list of displays that will be notified of input events.
@@ -29,6 +32,14 @@ const BrowserEvents = {
     assert && assert( !_.includes( this.attachedDisplays, display ),
       'A display cannot be concurrently attached to events more than one time' );
 
+    // Always first please
+    if ( !isGloballyAttached ) {
+      isGloballyAttached = true;
+
+      // never unattach because we don't know if there are other Displays listening to this.
+      globalKeyStateTracker.attachToWindow();
+    }
+
     this.attachedDisplays.push( display );
 
     if ( attachToWindow ) {