Text_fields.html : something bugs me!

Learn
1

Hello, I’m following this page: Text Fields · An Introduction to Elm

And something bugs me!

In this line:

    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []

What is the purpose of value model.content??

As I understand it, it sets the value attribute on the input tag but:

  • the value attribute does not appear when inspecting the html
  • it seems unnecessary

If I remove it, I see no difference and it does not change the functionality.

I don’t understand why we would set the value attribute here, I see no purpose to it.

Could you enlighten me?

1 Like
2

This sets the actual contents of the text box. You’re not seeing a difference when you remove it because you’re not doing anything interesting with it anyway. However, this would be really important if, for example, you had a starting input for the text box. Maybe it is say an input box for the user to change their display name or something, so it must first contain the original value.

However, better than me explaining what is going on here, I suggest you make a couple of changes to the program. First do the following, change the initial value of the content on the model:

init : Model
init =
  { content = "Hello" }

Re-compile and have a little play around. Try doing the same thing whilst removing the value model.contentfrom the input.

Then try changing what you do in the update function (make sure you have the value model.content back on the input for these:

update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent  ++ newContent}

Or:

update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = String.left 5 newContent }

Or even:

update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = String.reverse newContent }
1 Like
3

Indeed I can now see how setting an initial value to the model would make setting the value attribute a requirement.

I was initially thinking we were maybe preparing the ground for a form submission but that didn’t make much sense.

Thanks @allanderek!

4

Keep in mind that setting the value attribute in the input means strange things can happen when you change the value input in the update function and edit not at the end of the text.

For example, change the update function like @allanderek suggested, but instead of typing at the end of the text input, type in the middle, and you will see how after each key stroke the cursor jumps to the end of the input.

Not the most straightforward behavior and a bit of a gotcha.

5

Good to know thanks. I tried it and the behavior is indeed a little surprising.

I’m wondering though, in what circumstances would we need the model and the value attribute to go out of sync like that?

Do you have an idea out of curiosity?

6

If the cursor is managed somewhat properly you could be formatting the input as the user types it, for example a phone number or currency, adding spaces and punctuation.

The reality is that the cursor management in those cases can be tricky besides the dumb behavior of “restore it where it was”, so Elm doesn’t deal with it.

I personally don’t use what they call in react “controlled components” for the inputs in Elm, and only subscribe to onInput and update the model, without setting the value back to the input, and it seems to work since the input keeps the state and the events update the elm model.

I remember there was some trickery as well with defaultValue and such but I can’t recall right now what it was. Maybe others have better answers than me :slight_smile:

7

Yes of course it make sens now!

Ok I’ll keep that in mind thanks

8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.