[BUG]: 1p focus flickers when using AddressElement and PaymentElement.

[gdborton]

What happened?

Hello! We spotted an issue w/ the Stripe Element's form controls + FF + 1password. It seems that including both the PaymentElement and AddressElement on the same screen causes 1password to jump focus between both iframes repeatedly as they compete w/ each other.

I tried looking through the docs to see if there's a way to use a single iframe for both payment and address forms, but it seems there's not.

I know this is likely 1p more so than Stripe, but hoping that you've got a recommendation that we can apply here.

Environment

No response

Reproduction

No response

[alexlande-stripe]

Hey @gdborton, thanks for reporting this. Can you share a few more details?

1. Just to double check, this is happening with the 1password Firefox extension installed?
2. Is it happening continuously, once on initial render, only when you try to autofill using 1password? Video would be helpful if possible.

[gdborton]

@alexl-stripe

1. Yes, it seems to impact Arc as well. No issues w/ Chrome/Safari that we can tell.
2. Continuously, sometimes just once or twice, sometimes repeatedly.

I've opened a support ticket w/ 1p as well. Just hoping you can provide a work around that doesn't involve moving address collection to a separate step.

Video:

Kapture.2025-02-03.at.15.12.35.mp4

[gdborton]

More context:

Added a breakpoint inside 1p's extension, where it calls focus.

Both the payment and the address fields hit the breakpoint independently.

[alexlande-stripe]

@gdborton Thanks! Could you try one random thing and move the AddressElement to before the PaymentElement in the DOM? We have another recent issue that has a little bit of overlap with this: #567

[gdborton]

Same result:

Kapture.2025-02-03.at.15.48.34.mp4