UI extensions PhoneField component is broken

Extensions
,
1

Hi there,

The PhoneField from the @shopify/ui-extensions-react/checkout library is completely broken.

First of all, I don’t expect to see the country selector after I’ve put the complete phone number (with prefix), it is completely useless since the phone number is completed. The country selector should always be visible.

The onInput and onChange props have the same exact behaviour. The onChange should fire when the buyer has finished editing a field or pressed the country dropdown. Instead it is working in the same way as the onInput:

image
image1920×1041 97.8 KB

When I select another country on the country selector, nothing happens. I expect the onChange and onInput to fire.

In my opinion the phone field should:

  • Have the country selector always visible
  • Fire the onInput on every user change
  • Fire the onChange when the user has finished editing
  • Fire onInput and onChange when the user selects a country from the country dropdown

Something like the phone number editor on the admin customer page should be good:

image
image1226×998 52.9 KB

2

Thank you, we’ll take the UX feedback into consideration.

As for the onInput and onChange behavior, you are correct on all three counts for expected behavior. Thank you for reporting the bug. It’s been triaged to the appropriate team.

1 Like