fix(ripple): Clean activation timer and css when interrupted (#2490)

material-components · Apr 3, 2018 · 18cba98 · 18cba98
1 parent 306fd7f
commit 18cba98
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js
@@ -218,6 +218,14 @@ class MDCRippleFoundation extends MDCFoundation {
     if (!this.isSupported_()) {
       return;
     }
+
+    if (this.activationTimer_) {
+      clearTimeout(this.activationTimer_);
+      this.activationTimer_ = 0;
+      const {FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
+      this.adapter_.removeClass(FG_ACTIVATION);
+    }
+
     this.deregisterRootHandlers_();
     this.deregisterDeactivationHandlers_();
 

diff --git a/test/unit/mdc-ripple/foundation.test.js b/test/unit/mdc-ripple/foundation.test.js
@@ -167,6 +167,15 @@ testFoundation(`#destroy removes ${cssClasses.UNBOUNDED}`, ({foundation, adapter
   td.verify(adapter.removeClass(cssClasses.UNBOUNDED));
 });
 
+testFoundation(`#destroy removes ${cssClasses.FG_ACTIVATION} if activation is interrupted`,
+  ({foundation, adapter, mockRaf}) => {
+    foundation.activationTimer_ = 1;
+    foundation.destroy();
+    mockRaf.flush();
+
+    td.verify(adapter.removeClass(cssClasses.FG_ACTIVATION));
+  });
+
 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();
@@ -176,6 +185,18 @@ testFoundation('#destroy removes all CSS variables', ({foundation, adapter, mock
   });
 });
 
+testFoundation('#destroy clears the timer if activation is interrupted',
+  ({foundation, mockRaf}) => {
+    foundation.init();
+    mockRaf.flush();
+
+    foundation.activationTimer_ = 1;
+    foundation.destroy();
+    mockRaf.flush();
+
+    assert.equal(foundation.activationTimer_, 0);
+  });
+
 testFoundation('#destroy does nothing if CSS custom properties are not supported', ({foundation, adapter, mockRaf}) => {
   const isA = td.matchers.isA;
   td.when(adapter.browserSupportsCssVars()).thenReturn(false);