fix(touch-ripple): remove ripple wave on contextmenu

konstaui · Aug 16, 2022 · 9aad8d5 · 9aad8d5
1 parent 7abac56
commit 9aad8d5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/src/react/shared/use-touch-ripple.js b/src/react/shared/use-touch-ripple.js
@@ -28,12 +28,16 @@ export const useTouchRipple = (elRef, needsTouchRipple, eventsElRef) => {
     el.addEventListener('pointerdown', onPointerDown);
     el.addEventListener('pointermove', onPointerMove);
     el.addEventListener('pointerup', onPointerUp);
+    el.addEventListener('pointercancel', onPointerUp);
+    el.addEventListener('contextmenu', onPointerUp);
   };
   const detachEvents = () => {
     const el = eventsElRef.current;
     el.removeEventListener('pointerdown', onPointerDown);
     el.removeEventListener('pointermove', onPointerMove);
     el.removeEventListener('pointerup', onPointerUp);
+    el.removeEventListener('pointercancel', onPointerUp);
+    el.removeEventListener('contextmenu', onPointerUp);
   };
   const onMounted = () => {
     if (!eventsElRef || !eventsElRef.current || !needsTouchRipple) return;

diff --git a/src/svelte/shared/use-touch-ripple.js b/src/svelte/shared/use-touch-ripple.js
@@ -40,13 +40,17 @@ export const useTouchRipple = (el, touchRipple, eventsEl) => {
     eventsEl.current.addEventListener('pointerdown', onPointerDown);
     eventsEl.current.addEventListener('pointermove', onPointerMove);
     eventsEl.current.addEventListener('pointerup', onPointerUp);
+    eventsEl.current.addEventListener('pointercancel', onPointerUp);
+    eventsEl.current.addEventListener('contextmenu', onPointerUp);
   };
   const detachEvents = () => {
     if (!eventsEl || !eventsEl.current || !eventsEl.current.addEventListener)
       return;
     eventsEl.current.removeEventListener('pointerdown', onPointerDown);
     eventsEl.current.removeEventListener('pointermove', onPointerMove);
     eventsEl.current.removeEventListener('pointerup', onPointerUp);
+    eventsEl.current.removeEventListener('pointercancel', onPointerUp);
+    eventsEl.current.removeEventListener('contextmenu', onPointerUp);
   };
 
   onMount(() => {

diff --git a/src/vue/shared/use-touch-ripple.js b/src/vue/shared/use-touch-ripple.js
@@ -53,13 +53,17 @@ export const useTouchRipple = (
     el.addEventListener('pointerdown', onPointerDown);
     el.addEventListener('pointermove', onPointerMove);
     el.addEventListener('pointerup', onPointerUp);
+    el.addEventListener('pointercancel', onPointerUp);
+    el.addEventListener('contextmenu', onPointerUp);
   };
   const detachEvents = () => {
     eventsAttached = false;
     const el = getEl(eventsElRef);
     el.removeEventListener('pointerdown', onPointerDown);
     el.removeEventListener('pointermove', onPointerMove);
     el.removeEventListener('pointerup', onPointerUp);
+    el.removeEventListener('pointercancel', onPointerUp);
+    el.removeEventListener('contextmenu', onPointerUp);
   };
 
   watch(