callstack / callstack/react-native-paper

Add handler for keyboard interactions to TextInput

Abierto
#3,087 2 comentarios 1 reacción 0 asignados Ver en GitHub
repro provided
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

**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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.