From 0875e89847430f988877cab7ac98a11f12b839e6 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Fri, 30 Apr 2021 14:23:27 -0700
Subject: [PATCH] (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                            |  1 +
 packages/ripple/mwc-ripple-base.ts      | 14 +++++++++++++-
 packages/ripple/test/mwc-ripple.test.ts |  8 ++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6b2475969..19174bbbbe 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/packages/ripple/mwc-ripple-base.ts b/packages/ripple/mwc-ripple-base.ts
index aaf533a08a..ab84e76b06 100644
--- a/packages/ripple/mwc-ripple-base.ts
+++ b/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 =
diff --git a/packages/ripple/test/mwc-ripple.test.ts b/packages/ripple/test/mwc-ripple.test.ts
index 9d1745a640..509a5e6991 100644
--- a/packages/ripple/test/mwc-ripple.test.ts
+++ b/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);
+    });
   });
 });