Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Feb 5, 2018
+32 −9
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
386ce19
fix(ripple): Fix nested ripple handling to work with touch events
Feb 2, 2018
909164e
WIP Add test which fails on master and passes on branch
Feb 2, 2018
8093696
Merge branch 'master' into fix/ripple-activation-dedupe-touch
kfranqueiro Feb 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions packages/mdc-ripple/foundation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down
22 changes: 22 additions & 0 deletions test/unit/mdc-ripple/foundation-activation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down