search

PaackEng / elm-ui-dropdown

Dropdown module for Elm UI
https://package.elm-lang.org/packages/PaackEng/elm-ui-dropdown/latest/
MIT License
20 stars 11 forks source link

Add OnClickOutside Event Handler #9

Closed kutyel closed 3 years ago

kutyel commented 3 years ago

Hi people! 👋🏻

In some complex cases working with dropdowns/selects, maybe the user wants to have a multi select thing and does not want the dropdown to close when clicking an option (we might want to click more than one). Similarly, it would make sense to "dispatch" and event OnClickOutside to, for example, close all the open dropdowns in the page.

Does this make sense to you?

At least I need this functionality in my use case, if it makes sense to you all also I might give it a go but I'm not 100% sure how to achieve this right now, would have to investigate 🤔

kutyel commented 3 years ago

I came to the conclusion that the only way to make this work is to have the isOpen state handled from the outside of the component, maybe an option can be added to the custom constructor (the one I'm already working one), it could be something like withCustomHandling and would allow you to explicitly open or close the dropdown you want, what do you people think? 😉

cc: @miguelcoba @jouderianjr

jouderianjr commented 3 years ago

@kutyel hey, Adding a multiSelect ability would require some changes in the internal state as we use a Maybe item to hold the selected option. I was wondering if maybe would better to have 2 different modules, Dropdown and MultiSelectDropdown (not sure about the names yet, suggestions are welcome :D ). then we can extract the shareable functions to an internal module and use it in both modules.

About the external isOpen, I would avoid as much as possible have this type of behavior, as we will be splitting the state of the dropdown into different fields (not sure about that also). I think I saw some time ago, a way to close the dropdown when we click outside of the dropdown, something with custom events, maybe we can try to play around when the element loses the focus event? 🤔 I have to check how to do that.

What do you think about that? :D

kutyel commented 3 years ago

Fair enough, there are ton's of great articles about that: https://dev.to/margaretkrutikova/elm-dom-node-decoder-to-detect-click-outside-3ioh, I've used that technique before and works like a charm (it requires a custom html id per dropdown but I think we are already doing that in the init function so that's great). Indeed, providing something like an onClickOutside event handler would be better than to share the state with the outside world, I just want to have more control upon when to close the dropdown in the end 👌🏻 The idea of creating a separate Dropdown for that it's fine too, thanks for your work guys! 🙌🏻

kutyel commented 3 years ago

Also, example 5 is a gist of what I try to accomplish: https://github.com/PaackEng/elm-ui-dropdown/blob/master/examples/Example5.elm. These are the "interaction requirements":

kutyel commented 3 years ago

With my last PR and the new MultiSelectDropdown module, now everything is checked! 🙌🏻