iOS cursor does not appear for hosted fields when touching it quickly

General information

• SDK version: Braintree website (current)
• Environment: Braintree hosted fields website
• Browser and OS : iOS Safari 12.3.1

Issue description

First - yes I’ve seen several similar issues to this - and you’re probably familiar with them. They have various solutions - but I don’t think any of them got to the real crux of the problem or suggested the solution below. (eg. https://github.com/braintree/braintree-web/issues/345 https://github.com/braintree/braintree-web/issues/319 https://github.com/braintree/braintree-web/issues/408 https://github.com/braintree/braintree-web/issues/207)

The problem is simple - if you click quickly on the input field then focus may be received (I can type a card number) - but the flashing cursor does not appear so it looks to the user like it failed and they likely will click twice. The keyboard generally appears right away in my tests but the cursor is an important visual cue.

Please watch this short video - that’s taken today on the Braintree website where I can see the same issue as on my own website. You’ll see several attempts to focus on the card number field - each described below.

https://youtu.be/1R1JfBCIJ5s

1. Long press - successful - cursor appears
2. Quick press - also successful
3. Super quick press - fails - cursor does not appear
4. Deliberately long press again - successful
5. Super quick press - fails - cursor does not appear

I believe a potential solution is alluded to by this Stackoverflow question: https://stackoverflow.com/questions/52826005

The solution there that seems most promising is:

input:hover {
    cursor: text;
}

Which forces the cursor to appear. Obviously iPhone does not have hover in the conventional sense, but I just tested on my own text field and added ‘background: yellow’ and it does indeed go yellow when it has focus.

Obviously I’m not allowed to add cursor: text css for a Braintree hosted field since it’s not a permitted value - so I can’t really test this myself.

I tend to click quickly on fields and many many times have seen this during my development phase. How can I go about testing this to see if this is potential fix to the issue. Thanks

[crookedneighbor]

This of course means that if it wasn’t an Apple bug (which I had assumed at first) then 37.8.2 will be a critical update for anyone when iOS15 is in public beta and beyond.

To clarify, it still is a weird Apple behavior (that happens in no other browsers) around how focus is allowed inside of inputs in iframes, we just managed to get a work around that allows it to work. I’m not sure I can go so far as to qualify it as an Apple bug, because the change in behavior was definitely intentional on their part, it just happened to mess up payment forms inside of iframes.

[simeyla]

@crookedneighbor thanks. Was very happy to see this fixed so quickly. I wasn’t looking forward to having to reengineer my form to be inside a single iFrame! Now updated on my live site and working well in iOS 15.

Safari 15 definitely has some quirks and this was not a welcome one!