Skip to content

Add default handling of Space and Enter to Pressable #1614

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Add default handling of Space and Enter to Pressable #1614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f25ddb
Add default handling of Space and Enter to Pressable
Saadnajmi Dec 28, 2022
60e3c49
Typo
Saadnajmi Dec 28, 2022
aac8e46
Fix typo
Saadnajmi Dec 28, 2022
d2ee71f
Update snapshots
Saadnajmi Dec 29, 2022
ef74221
Fix errors
Saadnajmi Dec 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions Libraries/Components/Pressable/Pressable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,8 +221,6 @@ type Props = $ReadOnly<{|
*/
function Pressable(props: Props, forwardedRef): React.Node {
const {
acceptsFirstMouse, // [TODO(macOS GH#774)
enableFocusRing, // ]TODO(macOS GH#774)
accessible,
android_disableSound,
android_ripple,
Expand All @@ -240,10 +238,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
onPressIn,
onPressOut,
// [TODO(macOS GH#774)
acceptsFirstMouse,
enableFocusRing,
onFocus,
onBlur,
onKeyDown,
onKeyUp,
validKeysDown,
// ]TODO(macOS GH#774)
pressRetentionOffset,
style,
Expand All @@ -269,12 +270,15 @@ function Pressable(props: Props, forwardedRef): React.Node {
const restPropsWithDefaults: React.ElementConfig<typeof View> = {
...restProps,
...android_rippleConfig?.viewProps,
acceptsFirstMouse: acceptsFirstMouse !== false && !disabled, // [TODO(macOS GH#774)
enableFocusRing: enableFocusRing !== false && !disabled,
accessible: accessible !== false,
focusable: focusable !== false && !disabled, // ]TODO(macOS GH#774)
accessibilityState,
hitSlop,
// [TODO(macOS GH#774)
acceptsFirstMouse: acceptsFirstMouse !== false && !disabled,
enableFocusRing: enableFocusRing !== false && !disabled,
accessible: accessible !== false,
focusable: focusable !== false && !disabled,
validKeysDown: validKeysDown ?? ['Space', 'Enter'],
// ]TODO(macOS GH#774)
};

const config = useMemo(
Expand Down
60 changes: 60 additions & 0 deletions Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand All @@ -41,6 +47,12 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -81,6 +93,12 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -109,6 +127,12 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -153,6 +177,12 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -181,6 +211,12 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -228,6 +264,12 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -257,6 +299,12 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -311,6 +359,12 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down Expand Up @@ -339,6 +393,12 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down
12 changes: 12 additions & 0 deletions Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ exports[`TextInput tests should render as expected: should deep render when mock
selection={null}
text=""
underlineColorAndroid="transparent"
validKeysDown={
Array [
"Space",
"Enter",
]
}
/>
`;

Expand Down Expand Up @@ -55,6 +61,12 @@ exports[`TextInput tests should render as expected: should deep render when not
selection={null}
text=""
underlineColorAndroid="transparent"
validKeysDown={
Array [
"Space",
"Enter",
]
}
/>
`;

Expand Down
36 changes: 36 additions & 0 deletions Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ exports[`TouchableHighlight renders correctly 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={Object {}}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<Text>
Touchable
Expand Down Expand Up @@ -43,6 +49,12 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand All @@ -68,6 +80,12 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand All @@ -93,6 +111,12 @@ exports[`TouchableHighlight with disabled state should disable button when acces
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand All @@ -119,6 +143,12 @@ exports[`TouchableHighlight with disabled state should keep accessibilityState w
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand All @@ -144,6 +174,12 @@ exports[`TouchableHighlight with disabled state should overwrite accessibilitySt
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<View />
</View>
Expand Down
18 changes: 18 additions & 0 deletions Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ exports[`TouchableOpacity renders correctly 1`] = `
"opacity": 1,
}
}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<Text>
Touchable
Expand Down Expand Up @@ -54,6 +60,12 @@ exports[`TouchableOpacity renders in disabled state when a disabled prop is pass
"opacity": 1,
}
}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<Text>
Touchable
Expand Down Expand Up @@ -87,6 +99,12 @@ exports[`TouchableOpacity renders in disabled state when a key disabled in acces
"opacity": 1,
}
}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
<Text>
Touchable
Expand Down
36 changes: 36 additions & 0 deletions Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
>
Touchable
</Text>
Expand All @@ -40,6 +46,12 @@ exports[`TouchableWithoutFeedback with disabled state should be disabled when di
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
/>
`;

Expand All @@ -63,6 +75,12 @@ exports[`TouchableWithoutFeedback with disabled state should be disabled when di
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
/>
`;

Expand All @@ -86,6 +104,12 @@ exports[`TouchableWithoutFeedback with disabled state should disable button when
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
/>
`;

Expand All @@ -110,6 +134,12 @@ exports[`TouchableWithoutFeedback with disabled state should keep accessibilityS
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
/>
`;

Expand All @@ -133,5 +163,11 @@ exports[`TouchableWithoutFeedback with disabled state should overwrite accessibi
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
validKeysDown={
Array [
"Space",
"Enter",
]
}
/>
`;
Loading