From 20b1982f28fbe56ecd8b1817d3b952f68bc2e288 Mon Sep 17 00:00:00 2001 From: Ryan Russell Date: Thu, 7 Mar 2024 10:41:33 -0500 Subject: [PATCH] feat(material/core): Allow namespacing ripple-loader event handler ripple-loader registers an event handler on the document to do event delegation. If there are multiple instances of ripple-loader on one page, then they will both try to handle events for [mat-ripple-loader-uninitialized] elements. If a namespace is provided, then the handler will only handle events for [mat-ripple-loader-uninitialized="{namespace}"] elements. --- src/material/core/private/ripple-loader.ts | 6 ++++-- src/material/core/ripple/ripple.ts | 5 +++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/material/core/private/ripple-loader.ts b/src/material/core/private/ripple-loader.ts index 20d51bde98b4..953e1b603793 100644 --- a/src/material/core/private/ripple-loader.ts +++ b/src/material/core/private/ripple-loader.ts @@ -88,7 +88,7 @@ export class MatRippleLoader implements OnDestroy { }, ): void { // Indicates that the ripple has not yet been rendered for this component. - host.setAttribute(matRippleUninitialized, ''); + host.setAttribute(matRippleUninitialized, this._globalRippleOptions?.namespace ?? ''); // Store the additional class name(s) that should be added to the ripple element. if (config.className || !host.hasAttribute(matRippleClassName)) { @@ -139,7 +139,9 @@ export class MatRippleLoader implements OnDestroy { // TODO(wagnermaciel): Consider batching these events to improve runtime performance. - const element = eventTarget.closest(`[${matRippleUninitialized}]`); + const element = eventTarget.closest( + `[${matRippleUninitialized}="${this._globalRippleOptions?.namespace ?? ''}"]`, + ); if (element) { this._createRipple(element as HTMLElement); } diff --git a/src/material/core/ripple/ripple.ts b/src/material/core/ripple/ripple.ts index f2856004486f..72ca76189368 100644 --- a/src/material/core/ripple/ripple.ts +++ b/src/material/core/ripple/ripple.ts @@ -42,6 +42,11 @@ export interface RippleGlobalOptions { * default, ripples will wait for the enter animation to complete and for mouse or touch release. */ terminateOnPointerUp?: boolean; + + /** + * A namespace to use for ripple loader to allow multiple instances to exist on the same page. + */ + namespace?: string; } /** Injection token that can be used to specify the global ripple options. */