input element `setSelectionRange` after backspace does not work in IE10

[msafi]

Do you want to request a feature or report a bug?

Report a bug.

What is the current behavior?

1. Open this demo in IE10
2. Type any five character text
3. Caret should be at position 2 (i.e. 12|345) because it is forced there after every change with setSelectionRange
4. Use arrow or mouse to move caret to position 5 (i.e. 12345|).
5. Press backspace
6. Caret goes to position 4 (i.e. 1234|)

What is the expected behavior?

Caret should obey setSelectionRange and go to position 2 even after backspace on IE10.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This bug started at React v15.0.0. React v14.8 did not have this problem.

This issue was reported here text-mask/text-mask#133. @Heymdall found out that if you wrap setSelectionRange in a setTimeout(..., 0), it sets the position correctly, though the user would have to type slowly to ensure this always happens, so that is not a workaround.

[gaearon]

Is this also an issue in React 16?

[mobilerndev]

pls recheck

[gaearon]

We've dropped IE from supported browsers in React 18 so this is unlikely to get fixed.
Sorry.