search

datatrans / secure-fields-sample

Visually pleasing credit card forms with Datatrans Payment Gateway and PCI Proxy.
https://datatrans.github.io/secure-fields-sample/
MIT License
7 stars 7 forks source link

Input field triggers blur event on focus on ios safari and chrome #20

Closed Mhmdabed11 closed 2 years ago

Mhmdabed11 commented 2 years ago

Hey guys :) I am using your react example in my project and I am putting it inside a Formik component. On IOS safari and chrome, whenever I click the CC field, the field loses focus and immediately emits a blur event. I have to click on the field around 3 times to make it focus. I cannot show a reproduction of the issue as it is internal code. Do you guys have any idea why would this happen ?

pstadler commented 2 years ago

Hi Mohammad

Could you share some of your code with us? Unfortunately, we're unable to reproduce it.

dmengelt commented 2 years ago

@Mhmdabed11 or maybe try to create a small reproducer without "internal code". Also, I guess you are not able to reproduce the issue with our example. Right?

dmengelt commented 2 years ago

@Mhmdabed11 any update from your side?

Mhmdabed11 commented 2 years ago

Hey @dmengelt , thanks for following up. I was unable to reproduce the issue with your example. After some investigation, what was happening is that whenever I focus on the CVV or CC fields, the page scrolls a bit to put the field in focus which is expected. Once the scroll happens, then the keyboard automatically closes and the fields (CVV and CC) trigger the blur event. One workaround for me was to stop the scroll propagation to the SecureFields in the Securefields.js file. That made things work as expected.

Mhmdabed11 commented 2 years ago

I did not get the time to create a small reproducer from my end, but I will do so early next week 👍

dmengelt commented 2 years ago

@Mhmdabed11 awesome. lets us know!