Make children clickable when parent is disabled

necolas · Jun 13, 2023 · e4177c8 · e4177c8
1 parent 2a901e5
commit e4177c8
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
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
@@ -153,7 +153,7 @@ exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
 exports[`components/Pressable prop "disabled" 1`] = `
 <div
   aria-disabled="true"
-  class="css-view-175oi2r r-pointerEvents-633pao"
+  class="css-view-175oi2r r-pointerEvents-12vffkv"
   tabindex="-1"
 />
 `;

diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
     touchAction: 'manipulation'
   },
   disabled: {
-    pointerEvents: 'none'
+    pointerEvents: 'box-none'
   }
 });
 

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