Closing an expanded element when clicked outside of?

[Jamison Dance]

I'm currently building a menu element that expands when you click on it to reveal more options. It is pretty simple to make clicking on the element toggle the expand/collapse state.

However, my ideal interaction is to collapse the element when you click *anywhere* outside of it. This is pretty common in JS, but usually involves some global event handler checking clicks on `window` to see if they occur inside our element or not (see https://github.com/javierbyte/react-clickaway/blob/master/index.js for an example).

What is a good way to replicate this interaction in the Elm Architecture?

[Bernd Meyer]

Have you tried onBlur from Html.Events? http://package.elm-lang.org/packages/evancz/elm-html/4.0.2/Html-Events#onBlur

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

[Ossi Hanhinen]

Our straightforward solution was to add a full window translucent div (commonly referred to as a backdrop) that has an onClick handler for closing any transient dialogs/menus. That would sit at e.g. z-index 9 and the transient dialog/menu thing at z-index 10.

[Jamison Dance]

Thanks Ossi, this approach seemed to work the best for me.

One wrinkle I wasn't aware of is that z-index only applies to things that aren't `position: static`. I had to set the dialog I wanted to appear on top of the backdrop to `position: relative` for it to work properly, but things are working beautifully now.