[fix] Prevent href navigation for disabled Pressables

Close #2299
necolas · Jun 10, 2022 · 094bd0e · 094bd0e
1 parent ae2ee87
commit 094bd0e
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 2 deletions.
diff --git a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
@@ -32,7 +32,7 @@ exports[`components/Button prop "color" 1`] = `
 exports[`components/Button prop "disabled" 1`] = `
 <div
   aria-disabled="true"
-  class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-borderRadius-1jkafct r-backgroundColor-11mpjr4"
+  class="css-view-175oi2r r-transitionProperty-1i6wzkk r-userSelect-lrvibr r-borderRadius-1jkafct r-backgroundColor-11mpjr4 r-pointerEvents-633pao"
   role="button"
   style="transition-duration: 0s;"
   tabindex="-1"

diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
@@ -152,7 +152,7 @@ exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
 exports[`components/Pressable prop "disabled" 1`] = `
 <div
   aria-disabled="true"
-  class="css-view-175oi2r"
+  class="css-view-175oi2r r-pointerEvents-633pao"
   tabindex="-1"
 />
 `;

diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
@@ -205,6 +205,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
       onContextMenu={contextMenuHandler}
       onFocus={focusHandler}
       onKeyDown={keyDownHandler}
+      pointerEvents={disabled ? 'none' : rest.pointerEvents}
       ref={setRef}
       style={[
         !disabled && styles.root,

diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js
@@ -167,6 +167,7 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
       {...pressEventHandlers}
       accessibilityDisabled={disabled}
       focusable={!disabled && focusable !== false}
+      pointerEvents={disabled ? 'none' : undefined}
       ref={setRef}
       style={[
         styles.root,

diff --git a/packages/react-native-web/src/exports/TouchableOpacity/index.js b/packages/react-native-web/src/exports/TouchableOpacity/index.js
@@ -126,6 +126,7 @@ function TouchableOpacity(props: Props, forwardedRef): React.Node {
       {...pressEventHandlers}
       accessibilityDisabled={disabled}
       focusable={!disabled && focusable !== false}
+      pointerEvents={disabled ? 'none' : undefined}
       ref={setRef}
       style={[
         styles.root,