aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
914 stars 295 forks source link

Email input fields do not set keyboard type #5952

Open tlvince opened 1 month ago

tlvince commented 1 month ago

Before creating a new issue, please confirm:

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

Code Snippet

<Authenticator.Provider>
  <Authenticator loginMechanisms={['email']}>
    <SignOutButton />
  </Authenticator>
</Authenticator.Provider>

Console log output

No response

Additional information and screenshots

For phone number fields, phone-pad keyboard is used. Perhaps a new primitive for email is needed?

One workaround:

<Authenticator
  loginMechanisms={["email"]}
  components={{
    SignIn: ({ fields, ...props }) => {
      return (
        <Authenticator.SignIn
          {...props}
          fields={fields.map((field) => ({
            ...field,
            ...(field.type === "email" && {
              keyboardType: "email-address",
              autoCapitalize: "none",
            }),
          }))}
        />
      );
    },
  }}
/>
jacoblogan commented 1 month ago

Thank you for reporting this issue, we will add this request to our feature roadmap