PhoneFormatter steals focus when the page is loaded

[gqqnbig]

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]

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]

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]

@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]

This seems to happen on Safari as well.

[gqqnbig]

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

[dev0x10]

+1 this issue is exist

[hoverlover]

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]

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