search

Shopify / ui-extensions

MIT License
260 stars 36 forks source link

PhoneField not working when switching language #1926

Open frede-merkle opened 4 months ago

frede-merkle commented 4 months ago

Please list the package(s) involved in the issue, and include the version you are using

├── @shopify/ui-extensions-react@2024.4.1 ├── @shopify/ui-extensions@2024.4.1

Describe the bug

The PhoneField component works in the language the site is loaded in. When switching language, it is not possible to click the phone_country_select label on the right of the field, which shows countries and their country codes. This is true for when adding a custom field yourself, or when using the OOTB field which is part of the contact input.

Steps to reproduce the behavior:

  1. Log out
  2. Add product to cart and go to checkout in language A
  3. Go back and change site language to language B
  4. Go to checkout and input 4 digits as phone number
  5. Click the flag on the right of the input field
  6. Nothing happens (empty dropdown menu)

Expected behavior

A dropdown menu of all countries to choose from

Screenshots

Current behavior: image

Expected behavior: image

jamesvidler commented 4 months ago

@frede-merkle I wasn't able to reproduce this issue using your steps to reproduce. Are you still seeing this problem?

frede-merkle commented 4 months ago

@frede-merkle I wasn't able to reproduce this issue using your steps to reproduce. Are you still seeing this problem?

I am still having the problem. Is there some way we can try it on the same shop? I tried it on two of my shops, and it's the same problem, but perhaps I am doing something wrong.

jamesvidler commented 4 months ago

Do you see the issue consistently across different devices and browsers?

frede-merkle commented 4 months ago

Tried it on desktop/mobile on chrome and safari, encountering the same issue

jun-shop commented 4 months ago

I was able to repro on my test shop. are you by any chance using the Geolocation app? For me what I noticed was if there was a mismatch of currency with language (e.g., USD + Fr) I'd see this error in my console and the PhoneField dropdown would be empty

Screenshot 2024-05-14 at 4 53 42 PM

If I go back to the store and select the correct currency + language combination (Euro + Fr) then it would work as expected

https://github.com/Shopify/ui-extensions/assets/82546995/c1282636-ae20-4e07-8da7-7a5e5341e086

I'll file a ticket internally