mirror of
https://github.com/zoriya/react-native-web.git
synced 2025-12-06 06:36:13 +00:00
[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:
committed by
Nicolas Gallagher
parent
2a901e5fb1
commit
9b69c73938
@@ -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"
|
||||
/>
|
||||
`;
|
||||
|
||||
@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
|
||||
touchAction: 'manipulation'
|
||||
},
|
||||
disabled: {
|
||||
pointerEvents: 'none'
|
||||
pointerEvents: 'box-none'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user