callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.92k stars 2.09k forks source link

Add handler for keyboard interactions to TextInput #3087

Open bohrsty opened 2 years ago

bohrsty commented 2 years ago

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.

<TextInput
    value={value}
    onChangeText={(newValue) => 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:

import {
    Platform,
    TextInput as NativeTextInput
} from 'react-native';

<TextInput
    value={value}
    onChangeText={(newValue) => setValue(newValue)}
    label={'some label')}
    placeholder={'some placeholder'}
    dense={true}
    error={getError()}
    render={(props) => <NativeTextInput
        {...props}
        onKeyPress={Platform.OS === 'web'
            ? (event) => {
                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:

github-actions[bot] commented 2 years ago

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

github-actions[bot] commented 2 years ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.