#edgarsantiago-addressElement-bug
prisma lagoonBOT
Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- edgarsantiago93-ui-validation, 1 day ago, 9 messages
- edgar-addresselement-errors, 1 day ago, 32 messages
- edgarsantiago93, 2 days ago, 10 messages
austere lotus
Can you describe your implementation in more detail here?
brisk pawn
hello yes thnks, im using address element in react, and for default values im passing this number +19166734562
when im not using contacts, the phone gets displayed correctly, but if i activate contacts, it shows the +1 two times
austere lotus
When you say you are "passing this number", I assume you are using it in the default values parameter
brisk pawn
yes
austere lotus
When you say "activate contacts" what are you referring to ?
brisk pawn
well some times we pass the contacts array to the address options, that "activates" the option
austere lotus
Ah, okay you mean this param : https://stripe.com/docs/js/elements_object/create_address_element#address_element_create-options-contacts
brisk pawn
correct
austere lotus
And in this case it renders the "+1" twice. Once in the dropdown and once in the actual number rendered
brisk pawn
exactly, if the user gets the full address form without the contacts option,it renders correctly but when using them it adds it again to the input
(ive also tested it with other countries, same behaviour)
austere lotus
Okay, I'm going to try and repro first, then I will raise the issue internally
brisk pawn
awesome thanks
austere lotus
Hmm... I'm not nseeing any difference in behavior when I specify contacts.
But I don't even see the contact listed anywhere so perhaps I'm not doing it properly
brisk pawn
hmm im using 2 contacts, maybe that changes things
and im setting fields.phone to always(inside address element options) also, i believe that triggers the phone input
austere lotus
Yes that is required when using Contacts
I'm still trying and I don't even see any option to select a contact
I can see what it is supposed to look like here https://stripe.com/docs/elements/address-element
brisk pawn
yeap, i thought it was weird bc on the "normal" implementation without contacts, the same input with the same values show different results
austere lotus
So if you just pass the number as a "default value", it looks normal?
brisk pawn
so i have an array of 2 contacts, i just use contacts[0] as default values and the array for contacts
but basically yes, because i think that when there are no contacts, default values still have the same value, but looks normally
austere lotus
Okay can you share the options parameter you are passing when you mount the Address Element? With dummy data
brisk pawn
sure, gimme a sec
this is the array
[
{
"name": "edgar",
"address": {
"line1": "14519 Sherman Way",
"city": "Los Angelesn",
"state": "CA",
"postal_code": "91405",
"country": "US"
},
"phone": "+19166734562"
},
{
"name": "Santiago",
"address": {
"line1": "14519 Sherman Way",
"city": "Houston",
"state": "CA",
"postal_code": "91405",
"country": "US"
},
"phone": "+12103847937"
}
]
and this is the options object
{
mode,
defaultValues,
contacts: isContacts ? checkoutValues?.contacts : [],
fields: {
phone: 'always',
},
validation: {
phone: {
required: 'always',
},
},
}
isContacts is just a flag
austere lotus
Okay and defaultValues is just contacts[0]
brisk pawn
exactly
austere lotus
Okay I finally was able to reproduce this behavior. The Contacts don't show up if you are also rendering the Payment Element (which is how my test integration was built). I will be raising this issue internally (for both). If you want to get updated about work being done on this you can write in to Support https://support.stripe.com/contact
brisk pawn
hmm thats weird, im also using payment element in the same page
thanks for the information
austere lotus
Oh, maybe there is something particular to how I'm rendering it. But yes, this looks like a bug to me and I will raise it
brisk pawn
awesome, thank you! we'll keep the contacts feature behind the flag for the moment