Credit card number entry jumps in Android Chrome

[lucymariej]

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

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[lucymariej]

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]

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]

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]

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]

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]

Is there any official solution to this bug? Greetings.