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: Poll for Intermediate to Advanced topics that people struggle with

[sergii . kamenskyi]

The biggest problems with Elm for me was (and maybe are):
- What is tagged type and how and why to use it. 
- Cmd, Msg, Task, Subscription, effects - translation for a JS developer, 
please.
- SPA routing (still a pain for something little more complex than "hello 
world")
- Where is my UI components? (Reusing code, cross-component and child 
-parent communication)
- Http, Json, store responses and errors (before and after RemoteData 
package)

On Monday, 24 April 2017 16:06:53 UTC+2, Jeff Schomay wrote:
>
> Hello,
>
> I am considering doing some training material on working with Elm in 
> production.  I want to focus on areas that people struggle with after they 
> are already familiar with Elm.  What concepts continue to confuse you? 
>  What product requirements have been difficult to achieve with Elm?  What 
> is most painful about your Elm codebase?
>
> Some topics I have already thought of:
>
> - decoders
> - debouncing (http autocomplete input field for example)
> - scroll to element
> - testing
> - unwieldy update functions
> - api design
>
> If you have anything you'd like me to consider, please add it to the list. 
>  Thank you!
>

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