[fix] Make children pressable when parent is disabled

It fixes the inconsistency between native builds and react-native-web,
where when disabling Pressables and other tappable elements, the
children on native builds are still interactable (swiping, tapping, etc)
but un-interactable in react-native-web. On react-native-web, the
pointerEvents were set to 'none' to address 094bd0e, which causes this
inconsistency.

The solution was to change from 'none' to 'box-none', which maintains
the desired behavior of the original issue and addresses the current.

Close #2536
Fix #2391
This commit is contained in:
jennifersalas
2023-06-13 09:04:34 -07:00
committed by Nicolas Gallagher
parent 2a901e5fb1
commit 9b69c73938
4 changed files with 4 additions and 4 deletions

View File

@@ -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"
/>
`;

View File

@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
touchAction: 'manipulation'
},
disabled: {
pointerEvents: 'none'
pointerEvents: 'box-none'
}
});

View File

@@ -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,

View File

@@ -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,