mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-06-03 02:42:05 +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
+1
-1
@@ -153,7 +153,7 @@ exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
|
|||||||
exports[`components/Pressable prop "disabled" 1`] = `
|
exports[`components/Pressable prop "disabled" 1`] = `
|
||||||
<div
|
<div
|
||||||
aria-disabled="true"
|
aria-disabled="true"
|
||||||
class="css-view-175oi2r r-pointerEvents-633pao"
|
class="css-view-175oi2r r-pointerEvents-12vffkv"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
/>
|
/>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
|
|||||||
touchAction: 'manipulation'
|
touchAction: 'manipulation'
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
pointerEvents: 'none'
|
pointerEvents: 'box-none'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -175,7 +175,7 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
|
|||||||
{...pressEventHandlers}
|
{...pressEventHandlers}
|
||||||
accessibilityDisabled={disabled}
|
accessibilityDisabled={disabled}
|
||||||
focusable={!disabled && focusable !== false}
|
focusable={!disabled && focusable !== false}
|
||||||
pointerEvents={disabled ? 'none' : undefined}
|
pointerEvents={disabled ? 'box-none' : undefined}
|
||||||
ref={setRef}
|
ref={setRef}
|
||||||
style={[
|
style={[
|
||||||
styles.root,
|
styles.root,
|
||||||
|
|||||||
@@ -132,7 +132,7 @@ function TouchableOpacity(props: Props, forwardedRef): React.Node {
|
|||||||
{...pressEventHandlers}
|
{...pressEventHandlers}
|
||||||
accessibilityDisabled={disabled}
|
accessibilityDisabled={disabled}
|
||||||
focusable={!disabled && focusable !== false}
|
focusable={!disabled && focusable !== false}
|
||||||
pointerEvents={disabled ? 'none' : undefined}
|
pointerEvents={disabled ? 'box-none' : undefined}
|
||||||
ref={setRef}
|
ref={setRef}
|
||||||
style={[
|
style={[
|
||||||
styles.root,
|
styles.root,
|
||||||
|
|||||||
Reference in New Issue
Block a user