@react-aria/interactions - npm Package Compare versions

Comparing version 3.0.0-nightly-8ab4f20de-240913 to 3.0.0-nightly-9e79420c1-240918

dist/usePress.main.js

@@ -271,3 +271,3 @@ var $f7e14e656343df57$exports = require("./textSelection.main.js");
                 // default on pointer down and handle focusing the pressable element ourselves.
-                if ($0294ea432cd92340$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
+                if ($0294ea432cd92340$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
                 state.pointerType = e.pointerType;
@@ -295,3 +295,3 @@ let shouldStopPropagation = true;
                     // focus event will be fired.
-                    if ($0294ea432cd92340$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
+                    if ($0294ea432cd92340$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
                     e.stopPropagation();
@@ -334,4 +334,19 @@ }
                     if (!allowTextSelectionOnPress) (0, $f7e14e656343df57$exports.restoreTextSelection)(state.target);
+                    // Prevent subsequent touchend event from triggering onClick on unrelated elements on Android. See below.
+                    // Both 'touch' and 'pen' pointerTypes trigger onTouchEnd, but 'mouse' does not.
+                    if ('ontouchend' in state.target && e.pointerType !== 'mouse') addGlobalListener(state.target, 'touchend', onTouchEnd, {
+                        once: true
+                    });
                 }
             };
+            // This is a workaround for an Android Chrome/Firefox issue where click events are fired on an incorrect element
+            // if the original target is removed during onPointerUp (before onClick).
+            // https://github.com/adobe/react-spectrum/issues/1513
+            // https://issues.chromium.org/issues/40732224
+            // Note: this event must be registered directly on the element, not via React props in order to work.
+            // https://github.com/facebook/react/issues/9809
+            let onTouchEnd = (e)=>{
+                // Don't preventDefault if we actually want the default (e.g. submit/link click).
+                if ($0294ea432cd92340$var$shouldPreventDefaultUp(e.target)) e.preventDefault();
+            };
             let onPointerCancel = (e)=>{
@@ -351,3 +366,3 @@ cancel(e);
                 // default on mouse down and handle focusing the pressable element ourselves.
-                if ($0294ea432cd92340$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
+                if ($0294ea432cd92340$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
                 if (state.ignoreEmulatedMouseEvents) {
@@ -589,8 +604,8 @@ e.stopPropagation();
 }
-function $0294ea432cd92340$var$shouldPreventDefault(target) {
+function $0294ea432cd92340$var$shouldPreventDefaultDown(target) {
     // We cannot prevent default if the target is a draggable element.
     return !(target instanceof HTMLElement) || !target.hasAttribute('draggable');
 }
-function $0294ea432cd92340$var$shouldPreventDefaultKeyboard(target, key) {
-    if (target instanceof HTMLInputElement) return !$0294ea432cd92340$var$isValidInputKey(target, key);
+function $0294ea432cd92340$var$shouldPreventDefaultUp(target) {
+    if (target instanceof HTMLInputElement) return false;
     if (target instanceof HTMLButtonElement) return target.type !== 'submit' && target.type !== 'reset';
@@ -600,2 +615,6 @@ if ($0294ea432cd92340$var$isHTMLAnchorLink(target)) return false;
 }
+function $0294ea432cd92340$var$shouldPreventDefaultKeyboard(target, key) {
+    if (target instanceof HTMLInputElement) return !$0294ea432cd92340$var$isValidInputKey(target, key);
+    return $0294ea432cd92340$var$shouldPreventDefaultUp(target);
+}
 const $0294ea432cd92340$var$nonTextInputTypes = new Set([
@@ -602,0 +621,0 @@ 'checkbox',

dist/usePress.module.js

@@ -265,3 +265,3 @@ import {disableTextSelection as $14c0b72509d70225$export$16a4697467175487, restoreTextSelection as $14c0b72509d70225$export$b0d6fa1ab32e3295} from "./textSelection.module.js";
                 // default on pointer down and handle focusing the pressable element ourselves.
-                if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
+                if ($f6c31cce2adf654f$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
                 state.pointerType = e.pointerType;
@@ -289,3 +289,3 @@ let shouldStopPropagation = true;
                     // focus event will be fired.
-                    if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
+                    if ($f6c31cce2adf654f$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
                     e.stopPropagation();
@@ -328,4 +328,19 @@ }
                     if (!allowTextSelectionOnPress) (0, $14c0b72509d70225$export$b0d6fa1ab32e3295)(state.target);
+                    // Prevent subsequent touchend event from triggering onClick on unrelated elements on Android. See below.
+                    // Both 'touch' and 'pen' pointerTypes trigger onTouchEnd, but 'mouse' does not.
+                    if ('ontouchend' in state.target && e.pointerType !== 'mouse') addGlobalListener(state.target, 'touchend', onTouchEnd, {
+                        once: true
+                    });
                 }
             };
+            // This is a workaround for an Android Chrome/Firefox issue where click events are fired on an incorrect element
+            // if the original target is removed during onPointerUp (before onClick).
+            // https://github.com/adobe/react-spectrum/issues/1513
+            // https://issues.chromium.org/issues/40732224
+            // Note: this event must be registered directly on the element, not via React props in order to work.
+            // https://github.com/facebook/react/issues/9809
+            let onTouchEnd = (e)=>{
+                // Don't preventDefault if we actually want the default (e.g. submit/link click).
+                if ($f6c31cce2adf654f$var$shouldPreventDefaultUp(e.target)) e.preventDefault();
+            };
             let onPointerCancel = (e)=>{
@@ -345,3 +360,3 @@ cancel(e);
                 // default on mouse down and handle focusing the pressable element ourselves.
-                if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
+                if ($f6c31cce2adf654f$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
                 if (state.ignoreEmulatedMouseEvents) {
@@ -583,8 +598,8 @@ e.stopPropagation();
 }
-function $f6c31cce2adf654f$var$shouldPreventDefault(target) {
+function $f6c31cce2adf654f$var$shouldPreventDefaultDown(target) {
     // We cannot prevent default if the target is a draggable element.
     return !(target instanceof HTMLElement) || !target.hasAttribute('draggable');
 }
-function $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(target, key) {
-    if (target instanceof HTMLInputElement) return !$f6c31cce2adf654f$var$isValidInputKey(target, key);
+function $f6c31cce2adf654f$var$shouldPreventDefaultUp(target) {
+    if (target instanceof HTMLInputElement) return false;
     if (target instanceof HTMLButtonElement) return target.type !== 'submit' && target.type !== 'reset';
@@ -594,2 +609,6 @@ if ($f6c31cce2adf654f$var$isHTMLAnchorLink(target)) return false;
 }
+function $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(target, key) {
+    if (target instanceof HTMLInputElement) return !$f6c31cce2adf654f$var$isValidInputKey(target, key);
+    return $f6c31cce2adf654f$var$shouldPreventDefaultUp(target);
+}
 const $f6c31cce2adf654f$var$nonTextInputTypes = new Set([
@@ -596,0 +615,0 @@ 'checkbox',

package.json

 {
   "name": "@react-aria/interactions",
-  "version": "3.0.0-nightly-8ab4f20de-240913",
+  "version": "3.0.0-nightly-9e79420c1-240918",
   "description": "Spectrum UI components in React",
@@ -25,5 +25,5 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/ssr": "^3.0.0-nightly-8ab4f20de-240913",
-    "@react-aria/utils": "^3.0.0-nightly-8ab4f20de-240913",
-    "@react-types/shared": "^3.0.0-nightly-8ab4f20de-240913",
+    "@react-aria/ssr": "^3.0.0-nightly-9e79420c1-240918",
+    "@react-aria/utils": "^3.0.0-nightly-9e79420c1-240918",
+    "@react-types/shared": "^3.0.0-nightly-9e79420c1-240918",
     "@swc/helpers": "^0.5.0"
@@ -30,0 +30,0 @@ },

src/usePress.ts

@@ -413,3 +413,3 @@ /*
         // default on pointer down and handle focusing the pressable element ourselves.
-        if (shouldPreventDefault(e.currentTarget as Element)) {
+        if (shouldPreventDefaultDown(e.currentTarget as Element)) {
           e.preventDefault();
@@ -456,3 +456,3 @@ }
           // focus event will be fired.
-          if (shouldPreventDefault(e.currentTarget as Element)) {
+          if (shouldPreventDefaultDown(e.currentTarget as Element)) {
             e.preventDefault();
@@ -515,5 +515,24 @@ }
           }
+
+          // Prevent subsequent touchend event from triggering onClick on unrelated elements on Android. See below.
+          // Both 'touch' and 'pen' pointerTypes trigger onTouchEnd, but 'mouse' does not.
+          if ('ontouchend' in state.target && e.pointerType !== 'mouse') {
+            addGlobalListener(state.target, 'touchend', onTouchEnd, {once: true});
+          }
         }
       };
 
+      // This is a workaround for an Android Chrome/Firefox issue where click events are fired on an incorrect element
+      // if the original target is removed during onPointerUp (before onClick).
+      // https://github.com/adobe/react-spectrum/issues/1513
+      // https://issues.chromium.org/issues/40732224
+      // Note: this event must be registered directly on the element, not via React props in order to work.
+      // https://github.com/facebook/react/issues/9809
+      let onTouchEnd = (e: TouchEvent) => {
+        // Don't preventDefault if we actually want the default (e.g. submit/link click).
+        if (shouldPreventDefaultUp(e.target as Element)) {
+          e.preventDefault();
+        }
+      };
+
       let onPointerCancel = (e: PointerEvent) => {
@@ -540,3 +559,3 @@ cancel(e);
         // default on mouse down and handle focusing the pressable element ourselves.
-        if (shouldPreventDefault(e.currentTarget)) {
+        if (shouldPreventDefaultDown(e.currentTarget)) {
           e.preventDefault();
@@ -921,3 +940,3 @@ }
 
-function shouldPreventDefault(target: Element) {
+function shouldPreventDefaultDown(target: Element) {
   // We cannot prevent default if the target is a draggable element.
@@ -927,7 +946,7 @@ return !(target instanceof HTMLElement) || !target.hasAttribute('draggable');
 
-function shouldPreventDefaultKeyboard(target: Element, key: string) {
+function shouldPreventDefaultUp(target: Element) {
   if (target instanceof HTMLInputElement) {
-    return !isValidInputKey(target, key);
+    return false;
   }
-
+  
   if (target instanceof HTMLButtonElement) {
@@ -944,2 +963,10 @@ return target.type !== 'submit' && target.type !== 'reset';
 
+function shouldPreventDefaultKeyboard(target: Element, key: string) {
+  if (target instanceof HTMLInputElement) {
+    return !isValidInputKey(target, key);
+  }
+
+  return shouldPreventDefaultUp(target);
+}
+
 const nonTextInputTypes = new Set([
@@ -946,0 +973,0 @@ 'checkbox',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

715414

increased by1.24%

Lines of code

8438

increased by0.96%

Dependency changes

• Updated@react-aria/ssr@^3.0.0-nightly-9e79420c1-240918

• Updated@react-aria/utils@^3.0.0-nightly-9e79420c1-240918

• Updated@react-types/shared@^3.0.0-nightly-9e79420c1-240918