Bidirectional inputs move cursor

[tekknolagi]

Hi - thanks for Reef. It looks really interesting and small. I tried converting one of my mini apps (a shoddy currency converter) to use Reef to learn more about it. This page uses two input fields. Writing into one changes the other. When porting to Reef, I noticed that the page re-renders cause the cursor to get moved around mid-edit. I wonder if there is a canonical way around this. For example, try select-all in one of the inputs and type 123 to replace it.

Test case: https://codepen.io/gjnbnywp-the-vuer/pen/yyBXwea

[cferdinandi]

In this specific case, it seems to be tied to your use of Number.toFixed().

You might consider using that only if the decimal place exceeds the desired amount. You could also debounce your handler function so that it only runs after the user is done typing.

Here's a demo: https://codepen.io/cferdinandi/pen/qEWjeme?editors=0010

[tekknolagi]

I don't think it's related to toFixed. I removed the call and manually added some decimal places to my number. Then I tried inserting digits in the middle. My cursor still goes to the end.

[tekknolagi]

I'll look into debouncing, but I still would ideally like to do live update. The desired behavior on my end is pretty much "don't re-render the element being edited"

[cferdinandi]

Sounds like this bit on preserving cursor position may be helpful? https://stackoverflow.com/questions/14508707/updating-an-inputs-value-without-losing-cursor-position

This is a byproduct of setting the .value, unfortunately.

This is an example of where I think Reef is actually not the right tool, and you might be better served by a Web Component and old-school DOM manipulation.

[tekknolagi]

I will look into the JS--thank you--but I think you may be right. I'll keep my tool as-is with its ugly JS and try to keep Reef in mind for another future project!

[tekknolagi]

Although there isn't really a place for setSelectionRange with Reef because I don't control setting the .value--that happens in the background on render.

[cferdinandi]

You can do things after render using the reef:render event: https://reefjs.com/api/lifecycle/

[cferdinandi]

It occurs to me that one other way to avoid this issue might be an under-the-hood change, where I check the .value before setting it, and skip if it's already the same.

I thought I was doing that already, but I'll dig into the source code and if not, fix that.