PolymerElements / gold-cc-input

An input element that only allows credit card numbers
https://webcomponents.org/element/PolymerElements/gold-cc-input
13 stars 23 forks source link

Credit card number entry jumps in Android Chrome #55

Open lucymariej opened 7 years ago

lucymariej commented 7 years ago

Description

The credit card number entry's cursor jumps back to before the fifth digit after the fifth digit is typed.

Expected outcome

The cursor remains at the end of the input string.

Actual outcome

The cursor moves backwards by one number every time a new digit is written after a delimiter is placed.

Steps to reproduce

  1. Put a gold-cc-input element in the page.
  2. Open the page in chrome on an android device running 6.0 or newer
  3. Click the gold-cc-input element entry.
  4. Start typing your credit card number. The bug will become apparent after you type the fifth number.

Browsers Affected

lucymariej commented 7 years ago

I think that the issue might be fixed on lines 196-206 in gold-cc-input.html as I think that adding the spacing is what is changing the cursor position.

lucymariej commented 7 years ago

Tested this on the polymer component page, and the issue occurs in the demo as well, so it definitely isn't app-specific.

https://www.webcomponents.org/element/PolymerElements/gold-cc-input/demo/demo/index.html

If you open that page on an android device in Chrome, the issue is quick to reproduce.

lucymariej commented 7 years ago

Test on lines 115-126 appears to be testing that this behavior doesn't occur, but it does, which makes me think there is an environment that was missed during the testing process.

tracyminlu commented 7 years ago

we are using gold-cc-input component and we found the same issue on Android phone browsers. this.$.input.selectionStart = start+1; this.$.input.selectionEnd = start+1; For the above cursor update code, Android phone browsers seems ignore/not understand the cursor position update.

swm93 commented 7 years ago

I've bumped up against this issue too while using both gold-cc-input and gold-phone-input. @tracyminlu seems to be right as to what's causing this issue, but according to the spec gold-cc-input isn't doing anything wrong; gold-cc-input sets the type of the input to telephone and telephone inputs should support selectionStart and selectionEnd.

I found a related ticket in the text-mask project that solved the issue by wrapping the selectionStart and selectionEnd references in a call to setTimeout. I tried the same thing with gold-cc-input and gold-phone-input and it appears to have worked, although it makes inputting text asynchronous, which may introduce other negative effects.

var that = this;
setTimeout(function() {
    this.$.input.selectionStart = start+1;
    this.$.input.selectionEnd = start+1;
}, 10);
rafagarcia commented 7 years ago

Is there any official solution to this bug? Greetings.