callstack / callstack/react-native-paper

Add handler for keyboard interactions to TextInput

Open
#3,087 2 comments 1 reaction 0 assignees View on GitHub
repro provided
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

**Is your feature request related to a problem? Please describe.**
I use your library for mobile and web development (expo with react-native and react-native-web) and in the web app I find even myself hitting enter key to save some text in TextInput component. In react-native-web the TextInput component provides a "onKeyPressed" prop and in react-native there is something similar with "onSubmitEditing" prop.

**Describe the solution you'd like**
I'd like to have an "onKeyPressed" prop on platform web and if usefull an "onSubmitEditing" prop in mobile TextInput component.
```jsx
setValue(newValue)}
label={'some label')}
placeholder={'some placeholder'}
dense={true}
error={getError()}
onKeyPress={(event) => {
if(event.key === 'Enter' && !getError()) {
handleSave();
}
}}
/>
```

**Describe alternatives you've considered**
There is a way to implement the functionality with the "render" prop:
```jsx
import {
Platform,
TextInput as NativeTextInput
} from 'react-native';

setValue(newValue)}
label={'some label')}
placeholder={'some placeholder'}
dense={true}
error={getError()}
render={(props) => {
if(event.key === 'Enter' && isURL(textValue, validatorOptions)) {
handleSave();
}
}
: undefined
}
/>}
/>
```
but the way with direct props is cleaner and more intuitive in my opinion...

**Additional context**
My examples are only with onKeyPress for the "web" version, for the "mobile" it works similar...

I would submit a pull request on this, but I never used typescript while developing, so I hope someone else find this idea useful and develops a solution...

snack as requested by @github-actions: https://snack.expo.dev/3l-fYP0gh

not sure why the versions matter submitting a feature request, but here they are:
* `react-native`: 0.64.3
* `react-native-paper`: 4.11.1
* `react-native-vector-icons`: not sure what is included in "@expo/vector-icons" 12.0.0

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.