fix(ripple): Deactivate on contextmenu event (#3759)

material-components · Oct 15, 2018 · 4d76e3f · 4d76e3f
1 parent 81bb919
commit 4d76e3f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js
@@ -70,7 +70,7 @@ let PointType;
 const ACTIVATION_EVENT_TYPES = ['touchstart', 'pointerdown', 'mousedown', 'keydown'];
 
 // Deactivation events registered on documentElement when a pointer-related down event occurs
-const POINTER_DEACTIVATION_EVENT_TYPES = ['touchend', 'pointerup', 'mouseup'];
+const POINTER_DEACTIVATION_EVENT_TYPES = ['touchend', 'pointerup', 'mouseup', 'contextmenu'];
 
 // Tracks activations that have occurred on the current frame, to avoid simultaneous nested activations
 /** @type {!Array<!EventTarget>} */

diff --git a/test/unit/mdc-ripple/foundation-deactivation.test.js b/test/unit/mdc-ripple/foundation-deactivation.test.js
@@ -81,6 +81,29 @@ testFoundation('runs deactivation UX on pointerup after pointerdown', ({foundati
   clock.uninstall();
 });
 
+testFoundation('runs deactivation UX on contextmenu after pointerdown', ({foundation, adapter, mockRaf}) => {
+  const handlers = captureHandlers(adapter, 'registerInteractionHandler');
+  const documentHandlers = captureHandlers(adapter, 'registerDocumentInteractionHandler');
+  const clock = lolex.install();
+  foundation.init();
+  mockRaf.flush();
+
+  handlers.pointerdown({pageX: 0, pageY: 0});
+  mockRaf.flush();
+
+  documentHandlers.contextmenu();
+  mockRaf.flush();
+  clock.tick(DEACTIVATION_TIMEOUT_MS);
+
+  td.verify(adapter.removeClass(cssClasses.FG_ACTIVATION), {times: 2});
+  td.verify(adapter.addClass(cssClasses.FG_DEACTIVATION));
+
+  clock.tick(numbers.FG_DEACTIVATION_MS);
+  td.verify(adapter.removeClass(cssClasses.FG_DEACTIVATION));
+
+  clock.uninstall();
+});
+
 testFoundation('runs deactivation UX on mouseup after mousedown', ({foundation, adapter, mockRaf}) => {
   const handlers = captureHandlers(adapter, 'registerInteractionHandler');
   const documentHandlers = captureHandlers(adapter, 'registerDocumentInteractionHandler');
@@ -104,6 +127,29 @@ testFoundation('runs deactivation UX on mouseup after mousedown', ({foundation,
   clock.uninstall();
 });
 
+testFoundation('runs deactivation UX on contextmenu after mousedown', ({foundation, adapter, mockRaf}) => {
+  const handlers = captureHandlers(adapter, 'registerInteractionHandler');
+  const documentHandlers = captureHandlers(adapter, 'registerDocumentInteractionHandler');
+  const clock = lolex.install();
+  foundation.init();
+  mockRaf.flush();
+
+  handlers.mousedown({pageX: 0, pageY: 0});
+  mockRaf.flush();
+
+  documentHandlers.contextmenu();
+  mockRaf.flush();
+  clock.tick(DEACTIVATION_TIMEOUT_MS);
+
+  td.verify(adapter.removeClass(cssClasses.FG_ACTIVATION), {times: 2});
+  td.verify(adapter.addClass(cssClasses.FG_DEACTIVATION));
+
+  clock.tick(numbers.FG_DEACTIVATION_MS);
+  td.verify(adapter.removeClass(cssClasses.FG_DEACTIVATION));
+
+  clock.uninstall();
+});
+
 testFoundation('runs deactivation on keyup after keydown when keydown makes surface active',
   ({foundation, adapter, mockRaf}) => {
     const handlers = captureHandlers(adapter, 'registerInteractionHandler');