aws-amplify / aws-amplify/amplify-ui

Email input fields do not set keyboard type

Open
#5,952 1 comment 1 reaction 0 assignees View on GitHub
Authenticator feature-request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.