search

stripe-archive / react-stripe-elements

Moved to stripe/react-stripe-js.
https://github.com/stripe/react-stripe-js
MIT License
3.03k stars 319 forks source link

Tab press for CardElement doesn't set focus #520

Closed jayair closed 4 years ago

jayair commented 4 years ago

Summary

Tabbing to the the card field in Safari has weird issue. It highlights the card field but it's not in focus. On the next tab press, it goes back to the previous field that was highlighted, and on the next tab press, it sets the card field in focus.

Maybe it's being used incorrectly. But here is the relevant code — https://github.com/AnomalyInnovations/serverless-stack-demo-client/blob/master/src/components/BillingForm.js#L61. The entire project is open source. The live version is here https://demo2.serverless-stack.com/settings but you'll need to create an account to play with it.

jayair commented 4 years ago

It's a part of this guide — https://serverless-stack.com. We want to make sure we are teaching the right things.

Thank you for taking a look!

BLASTR commented 4 years ago

I have the same issue. When i hit space between iframe and border it appears different keyboard. I tested on iPhone SE with iOS 13.3. On android 10 when hit the space, keyboard show up and disappear.

jayair commented 4 years ago

Just bumping this up.

hofman-stripe commented 4 years ago

This is a known issue with Safari 13 which prevents programmatic focus to iframes.

asolove-stripe commented 4 years ago

We have launched a workaround that we believe partially solves this issue. Unfortunately, there is a limitation imposed by Safari 13 that prevents us from always fixing it.