Cursor moves to end in form fields

[bertfrees]

The field is validated whenever the text changes. This is fine but it also makes the cursor move to the end of the field.

[marisademeglio]

It might be something like this going on https://stackoverflow.com/questions/46000544/react-controlled-input-cursor-jumps

[marisademeglio]

I notice this also in non-regex text inputs, e.g. the editable text input that is part of a file selection form field. It doesn't jump around very often but if you wait for a bit and keep typing, it will happen.

[marisademeglio]

and it also happens for numeric fields if you just start typing.

it seems that react was designed this way 😣 https://github.com/facebook/react/issues/5386

though there are workarounds 🎉😐 https://dev.to/kwirke/solving-caret-jumping-in-react-inputs-36ic

[marisademeglio]

unfortunately i tried both of the widely-referenced fixes and neither is working. See the "issue-102" branch in which:

a. all input fields use event handlers (onChange) which update the controlled value (from useState) before calling the redux dispatch to update the value in the store, as recommended by this article

b. and as an experiment, custom input fields, e.g. strings that also have a regex pattern to match, like DTBook to Braille's "Stylesheet parameters" field, were given cursor state tracking, as mentioned in the link above and detailed here, but this also does not work.

[marisademeglio]

I am still noticing it for example in the HTML-to-Braille style sheets option (which I was looking at for issue #143)

[NPavie]

@marisademeglio with the latest update I'm checking again the issue regarding cursor jumps.

I'm testing again the fix described in this article replacing state propagation by the idea of the synchronized inner state update before the value change propagation.

With the version i pushed, i don't have the jumps any more in my tests on windows, but I do have some minor input "display/refresh" lag. (I don't think this lag part can be easily improved due to state synchronization between back and front)

I leave you the tests on macos, hopefully i have not forgotten some inputs (i quickly tested numbers selectors, checkboxes, files input and text inputs).

[marisademeglio]

There's something else going on that's specifically related to string trimming I think. When I type in any input field: file://12345

I end up with fil12345, file/1245, file/1234 or something like that.

When I type 12345678, I get the right string in the box.

When I type abcde 12345, I get abcde 1245

So maybe something to do with spaces or special characters?

I was using the HTML to braille script for this test.

[NPavie]

Hum i think i will have to do some tests on my older mac, on my windows machine i don't have any issues raising when typing any of those with the issue-102

[NPavie]

Hi @marisademeglio i'm looking back at this issue, i finally did a test on my mac after rebasing the issue-102 branch with master.

I tested to type file://12345 and abcde 12345 in every field i could and the probleme did not occured. (I tried to be as fast as possible while typing)

Could you test again the app with the latest state of this branch ?

I am on MacOS 12.6.2, i'll try to do an update (including safari)

[marisademeglio]

Ok I tried the issue-102 branch and I can't reproduce the behavior anymore! Great!