fix(platform-browser): DomEventsPlugin should always be the last plugin to be called for supports(). (#50394)

JeanMeche · thePunderWoman · commit 2ece42866d0e · 2025-10-15T21:12:46.000Z
This fixes the issues when `BrowserModule` is not the first module imported. Fixes #37149 #37850 PR Close #50394
diff --git a/packages/platform-browser/src/dom/events/dom_events.ts b/packages/platform-browser/src/dom/events/dom_events.ts
@@ -8,8 +8,7 @@
 
 import {DOCUMENT} from '@angular/common';
 import {Inject, Injectable, type ListenerOptions} from '@angular/core';
-
-import {EventManagerPlugin} from './event_manager';
+import {EventManagerPlugin} from './event_manager_plugin';
 
 @Injectable()
 export class DomEventsPlugin extends EventManagerPlugin {
diff --git a/packages/platform-browser/src/dom/events/event_manager.ts b/packages/platform-browser/src/dom/events/event_manager.ts
@@ -17,6 +17,13 @@ import {
 
 import {RuntimeErrorCode} from '../../errors';
 
+import type {EventManagerPlugin} from './event_manager_plugin';
+
+// Temporart re-export until we can change files that import from this file in G3.
+export {EventManagerPlugin} from './event_manager_plugin';
+
+import {DomEventsPlugin} from './dom_events';
+
 /**
  * The injection token for plugins of the `EventManager` service.
  *
@@ -47,7 +54,15 @@ export class EventManager {
     plugins.forEach((plugin) => {
       plugin.manager = this;
     });
-    this._plugins = plugins.slice().reverse();
+
+    const otherPlugins = plugins.filter((p) => !(p instanceof DomEventsPlugin));
+    this._plugins = otherPlugins.slice().reverse();
+
+    // DomEventsPlugin.supports() always returns true, it should always be the last plugin.
+    const domEventPlugin = plugins.find((p) => p instanceof DomEventsPlugin);
+    if (domEventPlugin) {
+      this._plugins.push(domEventPlugin);
+    }
   }
 
   /**
@@ -98,34 +113,3 @@ export class EventManager {
     return plugin;
   }
 }
-
-/**
- * The plugin definition for the `EventManager` class
- *
- * It can be used as a base class to create custom manager plugins, i.e. you can create your own
- * class that extends the `EventManagerPlugin` one.
- *
- * @publicApi
- */
-export abstract class EventManagerPlugin {
-  // TODO: remove (has some usage in G3)
-  constructor(private _doc: any) {}
-
-  // Using non-null assertion because it's set by EventManager's constructor
-  manager!: EventManager;
-
-  /**
-   * Should return `true` for every event name that should be supported by this plugin
-   */
-  abstract supports(eventName: string): boolean;
-
-  /**
-   * Implement the behaviour for the supported events
-   */
-  abstract addEventListener(
-    element: HTMLElement,
-    eventName: string,
-    handler: Function,
-    options?: ListenerOptions,
-  ): Function;
-}
diff --git a/packages/platform-browser/src/dom/events/event_manager_plugin.ts b/packages/platform-browser/src/dom/events/event_manager_plugin.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import type {ListenerOptions} from '@angular/core';
+import type {EventManager} from './event_manager';
+
+/**
+ * The plugin definition for the `EventManager` class
+ *
+ * It can be used as a base class to create custom manager plugins, i.e. you can create your own
+ * class that extends the `EventManagerPlugin` one.
+ *
+ * @publicApi
+ */
+export abstract class EventManagerPlugin {
+  // TODO: remove (has some usage in G3)
+  constructor(private _doc: any) {}
+
+  // Using non-null assertion because it's set by EventManager's constructor
+  manager!: EventManager;
+
+  /**
+   * Should return `true` for every event name that should be supported by this plugin
+   */
+  abstract supports(eventName: string): boolean;
+
+  /**
+   * Implement the behaviour for the supported events
+   */
+  abstract addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: Function,
+    options?: ListenerOptions,
+  ): Function;
+}
diff --git a/packages/platform-browser/src/dom/events/hammer_gestures.ts b/packages/platform-browser/src/dom/events/hammer_gestures.ts
@@ -19,7 +19,8 @@ import {
   ɵConsole as Console,
 } from '@angular/core';
 
-import {EVENT_MANAGER_PLUGINS, EventManagerPlugin} from './event_manager';
+import {EVENT_MANAGER_PLUGINS} from './event_manager';
+import {EventManagerPlugin} from './event_manager_plugin';
 
 /**
  * Supported HammerJS recognizer event names.
diff --git a/packages/platform-browser/src/dom/events/key_events.ts b/packages/platform-browser/src/dom/events/key_events.ts
@@ -9,7 +9,7 @@
 import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/common';
 import {Inject, Injectable, type ListenerOptions, NgZone} from '@angular/core';
 
-import {EventManagerPlugin} from './event_manager';
+import {EventManagerPlugin} from './event_manager_plugin';
 
 /**
  * Defines supported modifiers for key events.
diff --git a/packages/platform-browser/src/platform-browser.ts b/packages/platform-browser/src/platform-browser.ts
@@ -20,7 +20,8 @@ export {Title} from './browser/title';
 export {disableDebugTools, enableDebugTools} from './browser/tools/tools';
 export {By} from './dom/debug/by';
 export {REMOVE_STYLES_ON_COMPONENT_DESTROY} from './dom/dom_renderer';
-export {EVENT_MANAGER_PLUGINS, EventManager, EventManagerPlugin} from './dom/events/event_manager';
+export {EVENT_MANAGER_PLUGINS, EventManager} from './dom/events/event_manager';
+export {EventManagerPlugin} from './dom/events/event_manager_plugin';
 export {
   HAMMER_GESTURE_CONFIG,
   HAMMER_LOADER,
diff --git a/packages/platform-browser/test/dom/events/event_manager_spec.ts b/packages/platform-browser/test/dom/events/event_manager_spec.ts
@@ -9,7 +9,8 @@
 import {ɵgetDOM as getDOM} from '@angular/common';
 import {NgZone} from '@angular/core';
 import {DomEventsPlugin} from '../../../src/dom/events/dom_events';
-import {EventManager, EventManagerPlugin} from '../../../src/dom/events/event_manager';
+import {EventManager} from '../../../src/dom/events/event_manager';
+import {EventManagerPlugin} from '../../../src/dom/events/event_manager_plugin';
 
 import {TestBed} from '@angular/core/testing';
 import {isNode, createMouseEvent, el} from '@angular/private/testing';
