Skip to content
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.

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

Add handler for keyboard interactions to TextInput #3087

Open
bohrsty opened this issue Feb 11, 2022 · 2 comments
Open

Add handler for keyboard interactions to TextInput #3087

bohrsty opened this issue Feb 11, 2022 · 2 comments

Comments

@bohrsty
Copy link

bohrsty commented Feb 11, 2022

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:

  • 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
@github-actions
Copy link

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
Copy link

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

  • react-native
  • react-native-paper
  • react-native-vector-icons

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant