aws-amplify / aws-amplify/amplify-ui
Email input fields do not set keyboard type
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### Before creating a new issue, please confirm:
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).
### On which framework/platform are you having an issue?
React Native
### Which UI component?
Authenticator
### How is your app built?
Expo
### What browsers are you seeing the problem on?
iOS (React Native), Android (React Native)
### Which region are you seeing the problem in?
_No response_
### Please describe your bug.
Using the Authenticator components with the "email" login mechanism, the default keyboard type is used.
### What's the expected behaviour?
I expected the corresponding email input field to use device's email keyboard type.
### Help us reproduce the bug!
Use the [email login mechanism](https://ui.docs.amplify.aws/react-native/connected-components/authenticator/configuration#login-mechanisms)
### Code Snippet
```typescript
```
### Console log output
_No response_
### Additional information and screenshots
For [phone number fields](https://github.com/aws-amplify/amplify-ui/blob/aae53b336539788c6a7ff6c6804de8b9738761d4/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx#L23), `phone-pad` keyboard is used. Perhaps a new primitive for email is needed?
One workaround:
```typescript
{
return (
({
...field,
...(field.type === "email" && {
keyboardType: "email-address",
autoCapitalize: "none",
}),
}))}
/>
);
},
}}
/>
```
Contributor guide
Research direction
Start with the React Native Authenticator email login flow and compare it with the linked packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx. Reproduce the issue on iOS and Android, then verify that the email field selects the device's email keyboard type.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- authentication, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100