Authenticator - Can't make phone number optional

[lwang-79]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

When the phone_number field is set as optional in the sign-up form, if it is left empty, the form still verifies the field and displays a warning message, "Invalid phone number format."

What's the expected behaviour?

If the phone number field is optional, the form should only validate it if there are any characters input. Or empty field is acceptable when the field is optional.

Help us reproduce the bug!

Setup a basic react app, add auth category and UI component.

Code Snippet

  <Authenticator 
    formFields={{
      signUp: {
        email: {
          order:1
        },
        password: {
          order: 2
        },
        confirm_password: {
          order: 3
        },
        phone_number: {
          order: 4,
          isRequired: false,
        },
      }
    }}
  >
    <App />
  </Authenticator>

Console log output

No response

Additional information and screenshots

No response

[calebpollman]

Hi @lwang-79, thank you for raising this. Was able to repro the issue, and will be working on a fix. A short term mitigation can be to roll back to @aws-amplify/[email protected]

[calebpollman]

Fix is now available in @aws-amplify@next