search

braintree / braintree-web

A suite of tools for integrating Braintree in the browser
https://developer.paypal.com/braintree/docs/start/hello-client/javascript/v3
MIT License
444 stars 134 forks source link

Credit Card Number, Expiration, and CVV Auto Highlighting on Touch #379

Closed adamshafer closed 6 years ago

adamshafer commented 6 years ago

General information

Issue description

On this device (and maybe others), on my hosted fields instance, if I enter a valid credit card number/expiration/cvv, blur the field, then refocus the field via touch, the entire entry is selected/highlighted. Then, the OS triggers the "select / copy / paste" etc. menu.

This is undesired functionality and I'm not sure how to get rid of it. Doesn't occur in desktop, on iOS, etc. Also, just to be sure, I checked the examples in your SDK and they seem to have the same symptoms.

crookedneighbor commented 6 years ago

What's the behavior when doing the same on a non-hosted fields input?

adamshafer commented 6 years ago

Thanks for the response.

Are you asking on a non-hosted braintree input? Or are you asking if the other non-braintree fields are doing the same thing on the form? If it's the latter, the other fields on the form are not affected the same way. I also tested the fields on your demo here on this device: https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v3

Those have the same symptoms... once you put numbers in the fields, they are being auto-highlighted on touch on this device (and maybe others). However, on my iOS device here, it is NOT doing the auto-highlight.

Additionally, we're going live with this site soon, so if you'd like to test exactly what I'm looking at, our new site is here: https://ballglovewarehouse.theitwing.com/ ... you'll need to add some things to the cart and go to the checkout to see the payment fields, of course.

Thanks again!

crookedneighbor commented 6 years ago

I think this is just going to be a side effect of having these inputs inside iframes (iOS has its own weird quirks).

We'll look into it and see if there's anything we can do.

crookedneighbor commented 6 years ago

Okay, finally had some time to dig into this.

We added a touchstart listener way back in the version 2 iteration of hosted fields to deal with a bug in non-webview ios browsers. Apparently, it had this unexpected (and benign) side effect in android browsers.

Thanks for the report, we'll get this fixed and released.

adamshafer commented 6 years ago

Thanks for the response, Blade... looking forward to a fix.

On Thu, Aug 30, 2018 at 2:15 PM, Blade Barringer notifications@github.com wrote:

Okay, finally had some time to dig into this.

We added a touchstart listener https://github.com/braintree/braintree-web/blob/a99f2ee3d7a56f4392bbe74e8ccb722d413cbe14/src/hosted-fields/internal/components/base-input.js#L205-L207 way back in the version 2 iteration of hosted fields to deal with a bug in non-webview ios browsers. Apparently, it had this unexpected (and benign) side effect in android browsers.

Thanks for the report, we'll get this fixed and released.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/braintree/braintree-web/issues/379#issuecomment-417435099, or mute the thread https://github.com/notifications/unsubscribe-auth/AbDY8eHRTy3MOuHwVmHHCG1xvmxtSxWQks5uWDnEgaJpZM4VkpN9 .

--

Adam ShaferPro Athlete, Inc. 10800 N. Pomona Ave. Kansas City, MO 64153 816-659-8669 (Direct) 816-587-6050 (Main) www.ProAthleteInc.com http://www.proathleteinc.com/

crookedneighbor commented 6 years ago

This should be fixed in v3.37.0