fix(ripple): Fix nested ripple handling to work with touch events (#2178

)
material-components · Feb 5, 2018 · a633cf5 · a633cf5
1 parent 2fe4dcd
commit a633cf5
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js
@@ -290,13 +290,7 @@ class MDCRippleFoundation extends MDCFoundation {
       return;
     }
 
-    const hasActivatedChild =
-      e && activatedTargets.length > 0 && activatedTargets.some((target) => this.adapter_.containsEventTarget(target));
-    if (hasActivatedChild) {
-      return;
-    }
-
-    const {activationState_: activationState} = this;
+    const activationState = this.activationState_;
     if (activationState.isActivated) {
       return;
     }
@@ -315,6 +309,14 @@ class MDCRippleFoundation extends MDCFoundation {
       e.type === 'mousedown' || e.type === 'touchstart' || e.type === 'pointerdown'
     );
 
+    const hasActivatedChild =
+      e && activatedTargets.length > 0 && activatedTargets.some((target) => this.adapter_.containsEventTarget(target));
+    if (hasActivatedChild) {
+      // Immediately reset activation state, while preserving logic that prevents touch follow-on events
+      this.resetActivationState_();
+      return;
+    }
+
     if (e) {
       activatedTargets.push(/** @type {!EventTarget} */ (e.target));
       this.registerDeactivationHandlers_(e);
@@ -380,8 +382,7 @@ class MDCRippleFoundation extends MDCFoundation {
    * @return {{startPoint: PointType, endPoint: PointType}}
    */
   getFgTranslationCoordinates_() {
-    const {activationState_: activationState} = this;
-    const {activationEvent, wasActivatedByPointer} = activationState;
+    const {activationEvent, wasActivatedByPointer} = this.activationState_;
 
     let startPoint;
     if (wasActivatedByPointer) {

diff --git a/test/unit/mdc-ripple/foundation-activation.test.js b/test/unit/mdc-ripple/foundation-activation.test.js
@@ -336,6 +336,28 @@ testFoundation('will not activate multiple ripples on same frame if one surface
     td.verify(secondRipple.adapter.addClass(cssClasses.FG_ACTIVATION), {times: 0});
   });
 
+testFoundation('will not activate multiple ripples on same frame for parent surface w/ touch follow-on events',
+  ({foundation, adapter, mockRaf}) => {
+    const secondRipple = setupTest();
+    const firstHandlers = captureHandlers(adapter, 'registerInteractionHandler');
+    const secondHandlers = captureHandlers(secondRipple.adapter, 'registerInteractionHandler');
+    td.when(secondRipple.adapter.containsEventTarget(td.matchers.anything())).thenReturn(true);
+    foundation.init();
+    secondRipple.foundation.init();
+    mockRaf.flush();
+
+    firstHandlers.touchstart({changedTouches: [{pageX: 0, pageY: 0}]});
+    secondHandlers.touchstart({changedTouches: [{pageX: 0, pageY: 0}]});
+    // Simulated mouse events on touch devices always happen after a delay, not on the same frame
+    mockRaf.flush();
+    firstHandlers.mousedown();
+    secondHandlers.mousedown();
+    mockRaf.flush();
+
+    td.verify(adapter.addClass(cssClasses.FG_ACTIVATION));
+    td.verify(secondRipple.adapter.addClass(cssClasses.FG_ACTIVATION), {times: 0});
+  });
+
 testFoundation('will activate multiple ripples on same frame for surfaces without an ancestor/descendant relationship',
   ({foundation, adapter, mockRaf}) => {
     const secondRipple = setupTest();