Cascading ul and li with onClick

[David Legard]

I use cascading lists of ul and li elements (nodes) to create a navigation tree menu.

I keep a list of which nodes are open in my model, and when I click on a node, I toggle its presence in the list of open nodes.

I can then display or hide relevant nodes depending on whether they are open or not.

onoffstyle : List String -> String -> Attribute Msg
onoffstyle openNodes s =
         let oright = filter (\o -> o==s) openNodes
         in case (isEmpty oright) of
            True -> style [("display","none")]
            _ -> style [("display","block")]

I set up a cascading list as follows with ul and li to create a tree menu. 'Crumple' is the message I use to toggle the open node list.

drivers : Model -> Html Msg
drivers m = li [S.listyle,onClick (Crumple "drivers") ]
            [text "Software Drivers"
            , ul [S.ulstyle,S.onoffstyle m.opens "drivers"]
              [text "R"
              ,li [onClick (Crumple "drivers1")] [text "Drivers 1"]
              ,li [onClick (Crumple "drivers2")] [text "Drivers 2"]
              ,ul []
                [text "A"
                ,hr[][]
                ,text "B"]

              ]
            ]

However, even if I click on one of the innermost tree items, let us say, the "A" node, the onClick event in the outermost li fires (top line of the code).

Is that correct behaviour? It didn't happen in 0.14, but does in 0.17, throwing my navigation out of sync.

If it is correct behaviour, how would I get round it?

Thanks.

[Andrejs Mogilevcevs]

You need to refactor your HTML markup. Instead of setting onClick on a li element, you set it on a child element. E.g.:

    ul []

        [ li [] [ text "driver 1" ]

        , li []

            [ span [ onClick (Crumple "driver 2"] [ text "driver 2" ]

            , ul []

                [ li [] [ text "..." ]

                ]

            ]

        ]

With this markup, the span element is listening for click events.

Your problem was the event listener on li element would eventually be fired by a click on any of its child elements as the click is happening on that particular li element also. Events are bubbling up from target node up to body element. Read about it here http://www.javascripter.net/faq/eventbubbling.htm. I'm not sure about Elm 0.14, but if you are saying it did work, then probably Elm was preventing event bubbling.

[Pi]

You can also use `Html.Events.onWithOptions` and set `stopPropagation = True`. This will prevent event bubbling. For instance replace Html.Events.onClick by this implementation:

onClick =
    Html.Events.onWithOptions "click"
        { stopPropagation = True
        , preventDefault = False
        }
        << Json.Decode.succeed

[David Legard]

Thank you both very much for these prompt and useful answers.

I went with Pi's suggestion simply because it involved less rewriting.

It worked straight out of the box.... :)