Updating input fields without losing the cursor position

[Rehno Lindeque]

I'm currently working on input fields for elm-html-shorthand and bumping into one issue that I don't currently have a workaround for:

When the input field updates as you're typing, the cursor jumps to the end of the input. This is a side-effect of not having full control over all of the interaction in the input (namely the cursor/selection). Here's a more concrete example of what I mean: http://stackoverflow.com/questions/14508707/updating-an-inputs-value-without-losing-cursor-position; one can reset the cursor position yourself if need be in javascript.

I'd like to open an issue/PR for this on elm-html, but I'm not quite sure what to propose as a solution. Does anyone have any ideas?

[Jeff Smits]

This is exactly why Graphics.Input.Field is more complicated. I suspect the problems* with those input fields also stem from that full control. Even so, you can try to replicate the Graphics.Input.Field API and see if it has the same issues or not. If not, it's still a complete API. 

* It's so slow that it will drop characters if you type fast, even if you send the Selection right back. 

[Rehno Lindeque]

Right, so I suppose there's some native code making that work? I'm not entirely sure how this should interact with virtual-dom / elm-html... Might be interesting in the sense that if Element were to move to a virtual-dom implementation this issue would crop up again - so this might be a tentative step towards that goal.

PS I've managed to work around several other issues with <input> successfully, I think this might (?) be the only major bug away from a reasonably complete native html for forms.

[Jeff Smits]

On Sun, Feb 15, 2015 at 5:13 PM, Rehno Lindeque <rehno.l...@gmail.com> wrote:

Right, so I suppose there's some native code making that work? I'm not entirely sure how this should interact with virtual-dom / elm-html... Might be interesting in the sense that if Element were to move to a virtual-dom implementation this issue would crop up again - so this might be a tentative step towards that goal.

I guess.. I'm not familiar with that part of the RTS. 

[Sean Grove]

Sorry to revive a dead thread, but I'm working on a credit-card form for a demo implemented Elm.

 1. Does anyone have an approach that's worked for this - I assume at this point we'll have to resort to using ports to set the cursor position (and keeping track of the cursor position is likely going to be a nightmare)

 2. Is it possible in the future that the cursor position can be controlled declaratively, as e.g. an attribute on a input html node? 

[Richard Feldman]

I wouldn't maintain cursor state in the model; I'd just implement the port like this: http://stackoverflow.com/a/14508837/2334666

In other words, you never use the value attribute on the input; rather, you give it a unique key and don't touch it directly. Whenever you want to change its value, just send the desired new value to that port and let the JS snippet do the "stash cursor position, set the new value, restore cursor position" bit.

If you need to do this for multiple elements, send a DOM query string to the port and call document.querySelectorAll (or the like) with it to apply the logic to the correct element.

Does that seem reasonable?

[Richard Feldman]

Update: a much better solution is to just use stringProperty "defaultValue" value -  hooking into virtual-dom's built-in solution.

Full credit to kirisajenkins for this!

[Graham Simkins]

Richard, do you mean attribute "defaultValue" value? Where is 'stringProperty' defined?