vincent_addresselement-blur | Stripe Developers | Page 1

hollow pierBOT Oct 31, 2024, 10:51 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1301679903216766977

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

mystic dagger Oct 31, 2024, 10:51 PM

#

vincent_addresselement-blur

#

@ivory plover do you have a live example I can look up?
Like is the auto-complete from the browser itself or the feature inside AddressElement?

ivory plover Oct 31, 2024, 10:52 PM

#

from the feature in teh address element

#

hello 👋

mystic dagger Oct 31, 2024, 10:54 PM

#

let me have a quick look and see what I can find

ivory plover Oct 31, 2024, 10:54 PM

#

so far it seems like browser native autocomplete triggers a blur.

#

thank you!

mystic dagger Oct 31, 2024, 10:55 PM

#

Do you have a demo I can look at since it requires a special API key from Google?

ivory plover Oct 31, 2024, 10:56 PM

#

not at the moment unfortunately, its only deployed within my company org. i think there might be a demo in stripes docs

mystic dagger Oct 31, 2024, 10:56 PM

#

yeah but I can't easily change that code and debug with you

ivory plover Oct 31, 2024, 10:56 PM

#

https://docs.stripe.com/elements/address-element#:~:text=Autocomplete,-The Address Element&text=If you use the Address,separately from your Stripe account.

#

yeah of course

mystic dagger Oct 31, 2024, 10:56 PM

#

hence the ask so that you can help me help you :p

#

totally fine if you can't, in that case I'll have a look on my own and otherwise redirect you to support if I can't find anything obvious

ivory plover Oct 31, 2024, 10:57 PM

#

i would have to get back to you about a demo env. To your knowlege though, there is no callback from clicking a dropdown option? i looked for one in docs but wante dto be sure

mystic dagger Oct 31, 2024, 10:58 PM

#

No but I would expect both blur and change to fire

#

but all good, let me see what I can do to reproduce on my own

ivory plover Oct 31, 2024, 10:59 PM

#

i just asked, boss said not to send you a link 🙇‍♂️

mystic dagger Oct 31, 2024, 11:03 PM

#

all good I'll figure it out

ivory plover Oct 31, 2024, 11:04 PM

#

i appreciate it

mystic dagger Oct 31, 2024, 11:04 PM

#

Okay I just tried it locally and it works totally fine for me and I get the BLUR event when I pick one of the options

#

Can you share some code since you can't share a demo? Like can you share how you listen for the blur event?

ivory plover Oct 31, 2024, 11:05 PM

#

strange... okay. i will see if there is anything else on my end that is somehow not reacting to that.

#

sure

#

          <AddressElement
            options={{
              ...addressOptions,
              mode: "shipping",
              defaultValues: {
                name,
                address: { ...address, country: activeCountry },
              },
            }}
            onChange={onAddressUpdate}
            onBlur={onAddressBlur}
          />```

mystic dagger Oct 31, 2024, 11:06 PM

#

ah it's React

ivory plover Oct 31, 2024, 11:06 PM

#

ah yes

mystic dagger Oct 31, 2024, 11:06 PM

#

ah you're in shipping mode, let me check if it changes something

ivory plover Oct 31, 2024, 11:06 PM

#

interesting. thank you!

mystic dagger Oct 31, 2024, 11:07 PM

#

nope same thing. So I think I'd need a clear repro if you can on a jsfiddle or similar.
Let me make a simple example I can show you in the meantime

ivory plover Oct 31, 2024, 11:09 PM

#

thanks!

mystic dagger Oct 31, 2024, 11:11 PM

#

https://jsfiddle.net/4jzedorg/ this is a really simple demo showing AddressElement + PaymentElement (just to get auto-complete to work) and if you look at the JS console the BLUR event is fired properly

ivory plover Oct 31, 2024, 11:11 PM

#

ah!

#

i figured something out

#

The blur fires but before the rest of the address is in state

mystic dagger Oct 31, 2024, 11:13 PM

#

ah yeah though that sounds reasonable in that case potentially, the blur happens when you click, and then we do our thing to fill out the form and you should get the change event too then right?

ivory plover Oct 31, 2024, 11:13 PM

#

the form isnt filled in with the address strings

#

so the event property passed to the on blur function only has the event type, no inputs

#

i think the solution is to use change and only hit the server when the address is complete

#

and debounce

mystic dagger Oct 31, 2024, 11:14 PM

#

yeah

ivory plover Oct 31, 2024, 11:14 PM

#

Thank you for your help!

#vincent_addresselement-blur