# Text\_fields.html : something bugs me!

**URL:** https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004
**Category:** Learn
**Created:** [February 25, 2021, 9:13pm UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004 "2021-02-25T21:13:26Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![benjamin-thomas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/benjamin-thomas/32/3869_2.png) [@benjamin-thomas](https://discourse.elm-lang.org/u/benjamin-thomas)
#### Post date: [February 25, 2021, 9:13pm UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/1 "2021-02-25T21:13:26Z")

</div>

Hello, I’m following this page: [Text Fields · An Introduction to Elm](https://guide.elm-lang.org/architecture/text_fields.html)

And something bugs me!

In this line:

```elm
    [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?

---

<div class="post-metadata">

### Author: ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)
#### Post date: [February 25, 2021, 9:35pm UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/2 "2021-02-25T21:35:57Z")

</div>

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:

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

```

Re-compile and have a little play around. Try doing the same thing whilst removing the `value model.content`from 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:

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

```

Or:

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

```

Or even:

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

```

---

<div class="post-metadata">

### Author: ![benjamin-thomas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/benjamin-thomas/32/3869_2.png) [@benjamin-thomas](https://discourse.elm-lang.org/u/benjamin-thomas)
#### Post date: [February 26, 2021, 4:08am UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/3 "2021-02-26T04:08:38Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![joakin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joakin/32/171_2.png) [@joakin](https://discourse.elm-lang.org/u/joakin)
#### Post date: [February 26, 2021, 11:19am UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/4 "2021-02-26T11:19:00Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![benjamin-thomas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/benjamin-thomas/32/3869_2.png) [@benjamin-thomas](https://discourse.elm-lang.org/u/benjamin-thomas)
#### Post date: [February 26, 2021, 6:10pm UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/5 "2021-02-26T18:10:02Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![joakin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joakin/32/171_2.png) [@joakin](https://discourse.elm-lang.org/u/joakin)
#### Post date: [February 26, 2021, 6:30pm UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/6 "2021-02-26T18:30:23Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![benjamin-thomas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/benjamin-thomas/32/3869_2.png) [@benjamin-thomas](https://discourse.elm-lang.org/u/benjamin-thomas)
#### Post date: [February 26, 2021, 6:47pm UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/7 "2021-02-26T18:47:11Z")

</div>

Yes of course it make sens now!

Ok I’ll keep that in mind thanks

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)
#### Post date: [March 8, 2021, 6:47pm UTC](https://discourse.elm-lang.org/t/text-fields-html-something-bugs-me/7004/8 "2021-03-08T18:47:49Z")

</div>

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