Caret goes at the end of the controlled input after calling .checkValidity() method

[dmitryelagin]

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

What is the current behavior?
In this case, the form uses controlled inputs and .checkValidity() method is called on every change. If the user tries to fix text on any position inside an input and form is invalid, then caret goes at the end immediately after typing one symbol. Caret behaves similarly when .checkValidity() method is called on invalid input. All is fine if the form is valid.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle or CodeSandbox example below:
Example: https://jsfiddle.net/n5u2wwjg/48956/

What is the expected behavior?
Caret saves its position after user input with any form/input state, valid or not.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Tested with React 16.2, 16.3 and 16.4, with Chrome and Firefox on Ubuntu. React 16.2 doesn't have this bug, behaves as expected. But with 16.3 and 16.4 this bug is easily reproduced.

[deecewan]

There is a solution to your problem. It essentially is a reflection of what is happening in #955 (and a few others).
Example: https://jsfiddle.net/n5u2wwjg/50222/

Essentially, you need to call your native functions before you get to the render. By keeping it in the state, you can check your validity before you render, so when rendering, the caret maintains its position.

In this particular example, the result is the exact same - you only ever re-render when the inputs change (and cause a change to the state), and your validity check will also only ever get a different value once the inputs change.

[dmitryelagin]

Thanks a lot, @deecewan! It worked for me.

I also found another way to fix this behavior. React adds an event listener for "invalid" event. So, every time I call .checkValidity() method it emits simple "invalid" event when form or input is invalid and it forces React to rerender. But all form inputs have .validity.valid property. This property contains input validity state and it doesn't emit any event. Calling the forms .checkValidity() method is pretty similar to looping through all the form inputs and taking their validity state. So something like this will not force React to rerender:

public isValidForm(): boolean {
  if (this.ref.current == null) return false;
  return Array
    .from(this.ref.current.elements)
    .filter(isFormHtmlElement)
    .every(element => element.validity.valid && !element.validity.customError);
}

Hope it will help to somebody, who don't want to save validity state.