search

square / field-kit

FieldKit lets you take control of your text fields.
Apache License 2.0
463 stars 33 forks source link

PhoneFormatter steals focus when the page is loaded #62

Open gqqnbig opened 8 years ago

gqqnbig commented 8 years ago

Steps to reproduce:

  1. Go to the demo page
  2. Do not click any mouse button. Wait until the page is fully loaded, then hit keyboard key 1.

What is expected:

3 As the focus is not on any input control, the page should not change.

What happened actually:

3 The page suddenly scrolls from top to PhoneFormatter field, and "1" is input to the field.

It happens in Chrome 49.0.2623.87 m and IE 11, but not in FireFox 42.0.

gqqnbig commented 8 years ago

ok, I found it's related to this.setSelectedRange() in TextField method (https://github.com/square/field-kit/blob/master/src/text_field.js#L93). If I remove setSelectedRange, the issue doesn't happen.

eventualbuddha commented 8 years ago

Are you saying that this happens on any page that the phone formatter is on? Or just the demo page? It also doesn't happen in Safari.

gqqnbig commented 8 years ago

@eventualbuddha sorry, I just updated my comments. It happens in Chrome 49.0.2623.87 m and IE 11, but not in FireFox 42.0. It's related to this.setSelectedRange() in TextField method.

jjwon0 commented 8 years ago

This seems to happen on Safari as well.

gqqnbig commented 8 years ago

Note, if you are unable to reproduce the issue, disable all browser extensions as they may set focus and hide the problem.

dev0x10 commented 8 years ago

+1 this issue is exist

hoverlover commented 7 years ago

I can confirm this happens on Safari on iOS. I cannot reproduce in Chrome on OS X however. As @gqqnbig said, if I remove the call to setSelectedRange it fixes this issue.

hoverlover commented 7 years ago

Also, for a little more context, it seems to auto-scroll to the field that was last initialized with a FieldKit.TextField.