fix(ripple): Clean deactivation timer and CSS when interrupted (#3529)

(cherry picked from commit 2eda390)

Author: kfranqueiro

packages/mdc-ripple/foundation.js

@@ -225,8 +225,13 @@ class MDCRippleFoundation extends MDCFoundation {
       if (this.activationTimer_) {
         clearTimeout(this.activationTimer_);
         this.activationTimer_ = 0;
-        const {FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
-        this.adapter_.removeClass(FG_ACTIVATION);
+        this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
+      }
+
+      if (this.fgDeactivationRemovalTimer_) {
+        clearTimeout(this.fgDeactivationRemovalTimer_);
+        this.fgDeactivationRemovalTimer_ = 0;
+        this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
       }
 
       const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;

test/unit/mdc-ripple/foundation.test.js

@@ -170,9 +170,20 @@ testFoundation(`#destroy removes ${cssClasses.FG_ACTIVATION} if activation is in
     foundation.destroy();
     mockRaf.flush();
 
+    assert.equal(foundation.activationTimer_, 0);
     td.verify(adapter.removeClass(cssClasses.FG_ACTIVATION));
   });
 
+testFoundation(`#destroy removes ${cssClasses.FG_DEACTIVATION} if deactivation is interrupted`,
+  ({foundation, adapter, mockRaf}) => {
+    foundation.fgDeactivationRemovalTimer_ = 1;
+    foundation.destroy();
+    mockRaf.flush();
+
+    assert.equal(foundation.fgDeactivationRemovalTimer_, 0);
+    td.verify(adapter.removeClass(cssClasses.FG_DEACTIVATION));
+  });
+
 testFoundation('#destroy removes all CSS variables', ({foundation, adapter, mockRaf}) => {
   const cssVars = Object.keys(strings).filter((s) => s.indexOf('VAR_') === 0).map((s) => strings[s]);
   foundation.destroy();