(fix) [Ripple] Reset hover state when ripple is disabled

If a component is being hovered when disabled, ripple will miss the `mouseleave` event needed to deactivate the hover state.

When the component is enabled again, the first movement inside of the component will send a `mouseenter` event and apply hover state again.

PiperOrigin-RevId: 371405096

CHANGELOG.md

@@ -53,6 +53,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Fix issue with diff indices of different digit length
 - `ripple`
   - Fix IE11 errors with `isActive()`
+  - Fix cases where `hover` effect is stuck when toggling `disabled`
 - `select`
   - menu not opening when disabled initially set
 - `tab`

packages/ripple/mwc-ripple-base.ts

@@ -19,7 +19,7 @@ import {BaseElement} from '@material/mwc-base/base-element';
 import {RippleInterface} from '@material/mwc-base/utils';
 import {MDCRippleAdapter} from '@material/ripple/adapter';
 import MDCRippleFoundation from '@material/ripple/foundation';
-import {html, internalProperty, property, query, TemplateResult} from 'lit-element';
+import {html, internalProperty, property, PropertyValues, query, TemplateResult} from 'lit-element';
 import {classMap} from 'lit-html/directives/class-map';
 import {styleMap} from 'lit-html/directives/style-map';
 
@@ -184,6 +184,18 @@ export class RippleBase extends BaseElement implements RippleInterface {
     }
   }
 
+  protected update(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('disabled')) {
+      // stop hovering when ripple is disabled to prevent a stuck "hover" state
+      // When re-enabled, the outer component will get a `mouseenter` event on
+      // the first movement, which will call `startHover()`
+      if (this.disabled) {
+        this.endHover();
+      }
+    }
+    super.update(changedProperties);
+  }
+
   /** @soyTemplate */
   protected render(): TemplateResult {
     const shouldActivateInPrimary =

packages/ripple/test/mwc-ripple.test.ts

@@ -94,5 +94,13 @@ suite('mwc-ripple', () => {
       await element.updateComplete;
       assert.equal(internals.hovering, false);
     });
+
+    test('stops hovering when disabled', async () => {
+      element.startHover();
+      await element.updateComplete;
+      element.disabled = true;
+      await element.updateComplete;
+      assert.equal(internals.hovering, false);
+    });
   });
 });