SetState in MaskedTextFields moves focus between fields in IE and breakes Edge's tab

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

https://react.fluentui.dev

Other

18.48k stars 2.73k forks source link

SetState in MaskedTextFields moves focus between fields in IE and breakes Edge's tab #7580

Closed IvanTurashov closed 4 years ago

IvanTurashov commented 5 years ago

Environment Information

Package version(s): 6.121.0
Browser and OS versions: Edge 17, IE11, Windows 10

Please provide a reproduction of the bug in a codepen:

https://codepen.io/IvanTurashov/pen/gZGdzW?editors=1010

Actual behavior:

IE 11:

I fill part of first field
I fill part of second field. All is ok
I return to first and start continue input
First symbol inputed in first field, and focus jumps to second field

Edge: if I move focus from first to second, then browser's tab will break.

Expected behavior:

Any number of fields will filled correctly, like as in Chrome

Priorities and help requested:

It works correctly without setState in onChange.

Are you willing to submit a PR to fix? No

Requested priority: Blocking

Vitalius1 commented 5 years ago

@lambertwang any ideas? Can you look into this?

From a glance Edge errors out on an infinite loop caused by a setState in componentDidUpdate. Since you've built this you can probably find the issue faster.

lambertwang-zz commented 5 years ago

Huh, that's really strange. It doesn't repro in FF or Chrome for me, so I'm guessing there's some undefined or undocumented IE api that is causing this behavior. I will try to take a look this evening

Vitalius1 commented 5 years ago

@lambertwang thanks 👍

Jahnp commented 5 years ago

@lambertwang just checking, is this something you were able to look into? Thanks!

Vitalius1 commented 5 years ago

@ecraig12345 tagging for FYI

bdeterling commented 4 years ago

Here is another example in Safari 13.0.4. Click in the masked field, then type in the non-masked field and the focus moves back to the masked field on every keystroke. Works fine in Chrome.

https://codepen.io/bdeter/pen/gObKBgw

Vitalius1 commented 4 years ago

@ecraig12345 assigning to you as the code owner of TextField.

msft-github-bot commented 4 years ago

:tada:This issue was addressed in #11875, which has now been successfully released as office-ui-fabric-react@v7.89.1.:tada:

Handy links:

msft-github-bot commented 4 years ago

:tada:This issue was addressed in #11890, which has now been successfully released as office-ui-fabric-react@v6.211.3.:tada:

Handy links: