[elm-discuss] 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.

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

[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

Post by Andrejs Mogilevcevs
You need to refactor your HTML markup. Instead of setting onClick on a li
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.

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

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