When dealing with forms in SPAs I perform certain actions on form submission to mimic the expected behavior, like scrolling to the top of the page. For me the solution would be to perform a form.reset() before rendering the new view.
On Tuesday, 20 December 2016 18:03:28 UTC-3, Wouter In t Velt wrote: > > Over on Slack the other day, there was some dialogue about input fields > going on. > > One was about an issue when you set the value in your elm code like this: > > input [ type_ "text", onInput HandleInput, value model.fieldValue ] [] > > Issue: when user types really fast, the cursor jumps to the end of the > input field. > > The proposed direction to take was to not set the value, but use > defaultValue instead. > > input [ type_ "text", onInput HandleInput, defaultValue model.fieldValue ] > [] > > Then, the DOM's input field value state is "unmanaged" by Elm, and the > cursor no longer jumps to the end when the user types. > And since the suggestion on slack was made by Richard Feldman, it must be > good, right :) > > But this creates a *potential leak of input field values*. > > When the next view output also contains an input field, the virtual DOM > may reuse that original input field (with good reason of course). > But reusing the input does not reset the input's value. In normal > situations this is exactly what we want, but not all cases. > > Not if the input field is on a different page. > The the user expects the field to be new, and the input to be empty. But > if vdom reused the previous field, it will again show the previous value. > Even if Elm code did set the defaultValue (the actual value always > overrides defaultValue). > > This may also happen if the input was a password. If after login a new > view is rendered with an input field, this new field (if it is a plain text > field), will then *reveal the previously typed password*. Which is surely > not what we want. > Elm example with "leaking" password here <https://runelm.io/c/tcp>. (on > awesome runelm.io). From discussion over on slack here > <https://elmlang.slack.com/archives/help/p1482099641001714>. > > Such a "leak" can be solved by using Html.Keyed, to make sure that the > input field will not be reused by virtual DOM. > (example here on runelm.io <https://runelm.io/c/y2j>) > > But I was wondering: > > - Has anyone else run into similar issues of input field values > "leaking" into new views? > - Is there a better way to *prevent* this from happening (rather than > relying on our predictive instincts and applying Keyed when we suspect a > leak)? > > PS this also happens in react (fiddle here > <https://fiddle.jshell.net/zpdfLqbh/1/>) > > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout.
