[elm-discuss] Text box value displays inconsistently

[Paul Freeman]

This is the first time I've posted to the community. I chose this group
over Slack or Reddit, so please nudge me if this problem would be better
suited in one of the other communities.

Basically, I'm noticing an inconsistency in the text value displayed in one
of my text boxes. It is based on the type in the text box that follows it.
I've got it down to the simplest example I could find, which demonstrates
the error on http://elm-lang.org/try

Here is the code:

import Html exposing (Html, p, div, text, input, beginnerProgram)
import Html.Attributes exposing (type_, value)
import Html.Events exposing (onClick)

main =
beginnerProgram { model = { on = False }, view = view, update = update }


type alias Model =
{ on : Bool }


type Msg
= Toggle


update msg model =
{ model | on = not model.on }


view : Model -> Html Msg
view model =
div [] <| p [] [ text "On: ", input [ type_ "checkbox", onClick Toggle
] []]
:: (if model.on then
[ p [] [ text "Foo: ", input [ value "foo" ] [] ] ]
else
[]
)
++ [ p [] [ text "Bar: ", input [ value "10.0"{-, type_ "number"-}
] [] ] ]


If the code is executed as shown, you will see a checkbox. When the box is
checked, a new input box appears and has the default value "foo" inside
it. But, if you include the commented code (in red), then the default value
"foo" is not shown when the box is checked. This is very odd since the
commented code is for a completely different text box.

I'm happy to use a workaround, if anyone knows one, but so far I haven't
come across anything. Any thoughts are welcome.

Thanks!

[Fabian Kirchner]

If you replace the else branch with

[ p [] [] ]

this problem does not seem to happen. I guess, the reason could be the
following: In your version, if model.on is True, we get in total

[ p [] [ text "On: ", input [ type_ "checkbox", onClick Toggle ] [] ]
, p [] [ text "Foo: ", input [ value "foo" ] [] ]
, p [] [ text "Bar: ", input [ value "10.0", type_ "number" ] [] ]
]

and if it is False, we get

[ p [] [ text "On: ", input [ type_ "checkbox", onClick Toggle ] [] ]
, p [] [ text "Bar: ", input [ value "10.0", type_ "number" ] [] ]
]

After inspecting the generated Html (Chrome), it seems that when I switch
from False to True, the input field changes from

<input type="number">

to

<input type>

Is this actually the expected behaviour?

Post by Paul Freeman
This is the first time I've posted to the community. I chose this group
over Slack or Reddit, so please nudge me if this problem would be better
suited in one of the other communities.
Basically, I'm noticing an inconsistency in the text value displayed in
one of my text boxes. It is based on the type in the text box that follows
it. I've got it down to the simplest example I could find, which
demonstrates the error on http://elm-lang.org/try
import Html exposing (Html, p, div, text, input, beginnerProgram)
import Html.Attributes exposing (type_, value)
import Html.Events exposing (onClick)
main =
beginnerProgram { model = { on = False }, view = view, update = update }
type alias Model =
{ on : Bool }
type Msg
= Toggle
update msg model =
{ model | on = not model.on }
view : Model -> Html Msg
view model =
div [] <| p [] [ text "On: ", input [ type_ "checkbox", onClick Toggle
] []]
:: (if model.on then
[ p [] [ text "Foo: ", input [ value "foo" ] [] ] ]
else
[]
)
++ [ p [] [ text "Bar: ", input [ value "10.0"{-, type_ "number"-}
] [] ] ]
If the code is executed as shown, you will see a checkbox. When the box is
checked, a new input box appears and has the default value "foo" inside
it. But, if you include the commented code (in red), then the default value
"foo" is not shown when the box is checked. This is very odd since the
commented code is for a completely different text box.
I'm happy to use a workaround, if anyone knows one, but so far I haven't
come across anything. Any thoughts are welcome.
Thanks!

[Ilias Van Peer]

Correct, this is the virtualdom reusing dom-nodes. You may want to use
`Html.Keyed` to help the dom-diffing algorithm out by assigning unique keys
to children that shouldn't be "mixed and matched".

[Paul Freeman]

Thanks for taking a look!

The true/false code you show is correct - That's the output I'm looking
for. But somewhere in there the value "foo" is getting dropped. Also, the
input type should never change. 'on' should always be a checkbox, 'foo'
should always be text, and 'bar' should always be a number.

It's interesting that it works when the empty list is replaced with a blank
paragraph tag. I noticed that it also works with just a plain text entry,
like:

[ text "" ]

This can probably be used as a workaround for now, but maybe there is a bug
in appending empty lists from a conditional statement?

Anyway, I can get it working now, thanks to your help. I guess now we just
need to decide if this is expected behavior or a bug.

Post by Fabian Kirchner
If you replace the else branch with
[ p [] [] ]
this problem does not seem to happen. I guess, the reason could be the
following: In your version, if model.on is True, we get in total
[ p [] [ text "On: ", input [ type_ "checkbox", onClick Toggle ] [] ]
, p [] [ text "Foo: ", input [ value "foo" ] [] ]
, p [] [ text "Bar: ", input [ value "10.0", type_ "number" ] [] ]
]
and if it is False, we get
[ p [] [ text "On: ", input [ type_ "checkbox", onClick Toggle ] [] ]
, p [] [ text "Bar: ", input [ value "10.0", type_ "number" ] [] ]
]
After inspecting the generated Html (Chrome), it seems that when I switch
from False to True, the input field changes from
<input type="number">
to
<input type>
Is this actually the expected behaviour?

Post by Paul Freeman
This is the first time I've posted to the community. I chose this group
over Slack or Reddit, so please nudge me if this problem would be better
suited in one of the other communities.
Basically, I'm noticing an inconsistency in the text value displayed in
one of my text boxes. It is based on the type in the text box that follows
it. I've got it down to the simplest example I could find, which
demonstrates the error on http://elm-lang.org/try
import Html exposing (Html, p, div, text, input, beginnerProgram)
import Html.Attributes exposing (type_, value)
import Html.Events exposing (onClick)
main =
beginnerProgram { model = { on = False }, view = view, update = update }
type alias Model =
{ on : Bool }
type Msg
= Toggle
update msg model =
{ model | on = not model.on }
view : Model -> Html Msg
view model =
div [] <| p [] [ text "On: ", input [ type_ "checkbox", onClick
Toggle ] []]
:: (if model.on then
[ p [] [ text "Foo: ", input [ value "foo" ] [] ] ]
else
[]
)
++ [ p [] [ text "Bar: ", input [ value "10.0"{-, type_
"number"-} ] [] ] ]
If the code is executed as shown, you will see a checkbox. When the box
is checked, a new input box appears and has the default value "foo" inside
it. But, if you include the commented code (in red), then the default value
"foo" is not shown when the box is checked. This is very odd since the
commented code is for a completely different text box.
I'm happy to use a workaround, if anyone knows one, but so far I haven't
come across anything. Any thoughts are welcome.
Thanks!

[Kasey Speakman]

In addition to the other answers, I also spotted one other "gotcha" in your
example you may want to be aware of.

Your checkbox does not render the "checked" attribute. Your browser tracks
values for HTML form elements separately from Elm. Form values typically
get overwritten with Elm values when the view is rendered. But in this
case, nothing from Elm is setting whether the element should be checked.
Try starting with `on = True` and the checkbox initially renders unchecked
still.

Post by Paul Freeman
This is the first time I've posted to the community. I chose this group
over Slack or Reddit, so please nudge me if this problem would be better
suited in one of the other communities.
Basically, I'm noticing an inconsistency in the text value displayed in
one of my text boxes. It is based on the type in the text box that follows
it. I've got it down to the simplest example I could find, which
demonstrates the error on http://elm-lang.org/try
import Html exposing (Html, p, div, text, input, beginnerProgram)
import Html.Attributes exposing (type_, value)
import Html.Events exposing (onClick)
main =
beginnerProgram { model = { on = False }, view = view, update = update }
type alias Model =
{ on : Bool }
type Msg
= Toggle
update msg model =
{ model | on = not model.on }
view : Model -> Html Msg
view model =
div [] <| p [] [ text "On: ", input [ type_ "checkbox", onClick Toggle
] []]
:: (if model.on then
[ p [] [ text "Foo: ", input [ value "foo" ] [] ] ]
else
[]
)
++ [ p [] [ text "Bar: ", input [ value "10.0"{-, type_ "number"-}
] [] ] ]
If the code is executed as shown, you will see a checkbox. When the box is
checked, a new input box appears and has the default value "foo" inside
it. But, if you include the commented code (in red), then the default value
"foo" is not shown when the box is checked. This is very odd since the
commented code is for a completely different text box.
I'm happy to use a workaround, if anyone knows one, but so far I haven't
come across anything. Any thoughts are welcome.
Thanks!

[Paul Freeman]

Thanks Kasey,

I've run into that checkbox rendering issue in the past, when I've needed
some boxes to initialize as "checked". It does take a couple extra steps to
get it working.

Cheers!

Post by Kasey Speakman
In addition to the other answers, I also spotted one other "gotcha" in
your example you may want to be aware of.
Your checkbox does not render the "checked" attribute. Your browser tracks
values for HTML form elements separately from Elm. Form values typically
get overwritten with Elm values when the view is rendered. But in this
case, nothing from Elm is setting whether the element should be checked.
Try starting with `on = True` and the checkbox initially renders unchecked
still.

Post by Paul Freeman
This is the first time I've posted to the community. I chose this group
over Slack or Reddit, so please nudge me if this problem would be better
suited in one of the other communities.
Basically, I'm noticing an inconsistency in the text value displayed in
one of my text boxes. It is based on the type in the text box that follows
it. I've got it down to the simplest example I could find, which
demonstrates the error on http://elm-lang.org/try
import Html exposing (Html, p, div, text, input, beginnerProgram)
import Html.Attributes exposing (type_, value)
import Html.Events exposing (onClick)
main =
beginnerProgram { model = { on = False }, view = view, update = update }
type alias Model =
{ on : Bool }
type Msg
= Toggle
update msg model =
{ model | on = not model.on }
view : Model -> Html Msg
view model =
div [] <| p [] [ text "On: ", input [ type_ "checkbox", onClick
Toggle ] []]
:: (if model.on then
[ p [] [ text "Foo: ", input [ value "foo" ] [] ] ]
else
[]
)
++ [ p [] [ text "Bar: ", input [ value "10.0"{-, type_
"number"-} ] [] ] ]
If the code is executed as shown, you will see a checkbox. When the box
is checked, a new input box appears and has the default value "foo" inside
it. But, if you include the commented code (in red), then the default value
"foo" is not shown when the box is checked. This is very odd since the
commented code is for a completely different text box.
I'm happy to use a workaround, if anyone knows one, but so far I haven't
come across anything. Any thoughts are welcome.
Thanks!

--
You received this message because you are subscribed to a topic in the
Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/
topic/elm-discuss/YujY29aXFZk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
For more options, visit https://groups.google.com/d/optout.