Re: [elm-discuss] Re: Text box value displays inconsistently

[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!

On 27 June 2017 at 09:34, Kasey Speakman  wrote:

> 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.
>
> On Thursday, June 22, 2017 at 6:42:19 PM UTC-5, Paul Freeman wrote:
>>
>> 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!
>>
> --
> 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
> elm-discuss+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Text box value displays inconsistently

[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.

On Monday, 26 June 2017 05:31:39 UTC+12, Fabian Kirchner wrote:
>
> 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
>
> 
>
> to
>
> 
>
> Is this actually the expected behaviour?
>
> On Friday, 23 June 2017 01:42:19 UTC+2, Paul Freeman wrote:
>>
>> 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!
>>
>

-- 
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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Text box value displays inconsistently

[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.

On Thursday, June 22, 2017 at 6:42:19 PM UTC-5, Paul Freeman wrote:
>
> 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!
>

-- 
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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Text box value displays inconsistently

[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".

-- 
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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Text box value displays inconsistently

[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



to



Is this actually the expected behaviour?

On Friday, 23 June 2017 01:42:19 UTC+2, Paul Freeman wrote:
>
> 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!
>

-- 
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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.