Phone number Input Component not picking Country code automatically

[kaif_mtech]

Hello Team,

I've used the Phone number input component and on the Default value I've put the Country code + Mobile number value,
Now it's come from the API call and when I open that Container it's not reflecting the correct Country code,

If I try to change the value of the mobile number and put that value back, then it shows the correct country code.

Steps to reproduce:

• have a list of users, on click of view details call a query to fetch the user data
• Now in the query, you will get the country code and mobile number,
• I'm combining them and putting them as the default value to Phone Number Input.
• You can check there is not correct Country code, If you just try to change the mobile number's last digit and put it back the correct country code is visible now.

PS: you need to have a different country mobile number to reproduce

[kaif_mtech]

Here you can check there is a UK number and country selected as India

[kaif_mtech]

Hey @Darren,

Could you please take a look at this?

[Paulo]

Hi @kaif_mtech, are we on Cloud or Self-hosted Retool? I'm trying to reproduce this on Cloud but I only run into a similar issue with the label if the phone number saved on the db doesn't have spaces.

For example, when I first select a row in the table where the number has no spaces:

But after the space is added or a different row with spaces is selected:

Here is the component when a row with +44 and spaces is selected:

[kaif_mtech]

Hello @Paulo,
Thanks for your response.

Yes, I'm also on Cloud, and in the same way, I've tried to add space manually but it didn't work for me.
Here is the screenshot for the same

And If I'm not adding the space then also it behaves the same.

[Paulo]

Is 'countryCode' coming from a different column in the table?

[kaif_mtech]

No, So basically what I'm doing is calling the private details API first and then with the public details I'd form the table I'm finding the private information of that user so the private details object you can see in screenshot, it's have the difference fields like country code and mobile number.

[Paulo]

I see, so no matter what, the label is always evaluating to India. Is that your current location? I'm trying to figure out if it's just using your location instead of the area code.

[kaif_mtech]

Yes, it is my current location.
Now what do I need to do to make it work?

[Paulo]

Could you share the userPrivateDetails.value object? Feel free to hide sensitive data, I'm mostly interested on the datatype for countryCode and mobile. I tested setting the default value to the addition of two strings (area code and number) and the correct flag is shown no matter the spacing at the db level:

I wonder if it's related to the API or Retool evaluating the area code as a number.

For example:

Note: the latter addition would be an issue:

[kaif_mtech]

Sure, here is the userPrivateDetails object for your reference.
And there is no spacing in that also I've tried to convert the mobile value to a number and add it, but I still have the same issue!

jfyi: We're setting this userPrivateDetails in a temporary state of Retool on the click of the private details button from the listing page.

[Paulo]

Thanks for expanding on your use case.

Here is my repro attempt with a Rest API providing the response instead of grabbing the data directly from the table:

1. Select row event handler.
2. Trigger the POST request to get the number on row selection.
3. Pass data from the selected row.
4. The response is 'echoing' what we sent.
5. Success event handler to set the variable, parsing is necessary with this response because the object comes back as a string.
6. Variable updates correctly.
7. Tested with three different parents for the Phone Number Input component: null, Form, and a Container.

I'm still unable to reproduce what you are experiencing. Therefore, I'm starting to think that we may be dealing with an unexpected UI bug, potentially related to the dependency tree. Could we try completely deleting the Phone Number Input component and its parent, then recreating them?

Here is also the export for the App I built, in case you would like to test it on your end:
PhoneInputTest.json (28.2 KB)

[Paulo]

Update: I added a modal to the painting and I'm able to reproduce this issue.

Here are my findings:

If the event handler that opens the modal runs on success of the REST API query, there's a race condition, the value updates correctly but the flag does not:

However, if the event handler that opens the modal runs on row selection:

The tradeoff is that the Modal will show the previous phone number while the query is running.

I'm joining Office Hours right now. Feel free to join us we so can debug this live. Otherwise, I'll find a way to prevent this race condition afterwards.

[Paulo]

Conclusion:

If a component is hidden, which is the case for the hidden Modal, any APIs to update its model will not work. Although we are not directly 'updating the flag,' we are updating the State variable where the input gets its data from. If this happens before the Modal opens, there are no more updates, so the flag doesn't change from its previous state.

The only way for the flag to change is if the modal opens first, which we can achieve by opening the modal on row selection. This, however, will cause the Phone Number Input component to show the previous value of the state variable for a few milliseconds, which may not be ideal for the UX.

In order to prevent this race condition, the only viable implementation for your use case would be to not use a modal. Unless, of course, we are ok with the value of the input changing after the modal has opened.