@angular/material 18.0.4 → 18.0.6

package/fesm2022/core.mjs

@@ -13,7 +13,7 @@ import { startWith } from 'rxjs/operators';
 import { ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
 
 /** Current version of Angular Material. */
-const VERSION = new Version('18.0.4');
+const VERSION = new Version('18.0.6');
 
 /** @docs-private */
 class AnimationCurves {
@@ -968,14 +968,29 @@ class RippleRenderer {
         // are set to zero. The events won't fire anyway and we can save resources here.
         if (!animationForciblyDisabledThroughCss && (enterDuration || animationConfig.exitDuration)) {
             this._ngZone.runOutsideAngular(() => {
-                const onTransitionEnd = () => this._finishRippleTransition(rippleRef);
+                const onTransitionEnd = () => {
+                    // Clear the fallback timer since the transition fired correctly.
+                    if (eventListeners) {
+                        eventListeners.fallbackTimer = null;
+                    }
+                    clearTimeout(fallbackTimer);
+                    this._finishRippleTransition(rippleRef);
+                };
                 const onTransitionCancel = () => this._destroyRipple(rippleRef);
+                // In some cases where there's a higher load on the browser, it can choose not to dispatch
+                // neither `transitionend` nor `transitioncancel` (see b/227356674). This timer serves as a
+                // fallback for such cases so that the ripple doesn't become stuck. We add a 100ms buffer
+                // because timers aren't precise. Note that another approach can be to transition the ripple
+                // to the `VISIBLE` state immediately above and to `FADING_IN` afterwards inside
+                // `transitionstart`. We go with the timer because it's one less event listener and
+                // it's less likely to break existing tests.
+                const fallbackTimer = setTimeout(onTransitionCancel, enterDuration + 100);
                 ripple.addEventListener('transitionend', onTransitionEnd);
                 // If the transition is cancelled (e.g. due to DOM removal), we destroy the ripple
                 // directly as otherwise we would keep it part of the ripple container forever.
                 // https://www.w3.org/TR/css-transitions-1/#:~:text=no%20longer%20in%20the%20document.
                 ripple.addEventListener('transitioncancel', onTransitionCancel);
-                eventListeners = { onTransitionEnd, onTransitionCancel };
+                eventListeners = { onTransitionEnd, onTransitionCancel, fallbackTimer };
             });
         }
         // Add the ripple reference to the list of all active ripples.
@@ -1106,6 +1121,9 @@ class RippleRenderer {
         if (eventListeners !== null) {
             rippleRef.element.removeEventListener('transitionend', eventListeners.onTransitionEnd);
             rippleRef.element.removeEventListener('transitioncancel', eventListeners.onTransitionCancel);
+            if (eventListeners.fallbackTimer !== null) {
+                clearTimeout(eventListeners.fallbackTimer);
+            }
         }
         rippleRef.element.remove();
     }