I have a select list with a bunch of option elements in it. The select element has multiple set to True, so the user can select more than one element. What I’m trying to do is to have an event fire when an option in that select list is clicked on. I’m finding it not to be that straightforward. Here are the scenarios of how someone can interact:
Someone clicks on an option
This one is easy. I can add either an onInput event to the select element or an onClick event to the option. My update function will get called and everything works great.
Someone control/command clicks on multiple options
This also is easy. It works the same as the previous scenario.
Someone clicks on an option, then shift-clicks on another option to select a range of options
This is the one that is tripping me up. I can get the first and the second click, but I’m not getting any sort of event for the selection of the intermediate options.
It’s a pretty common case, so I’m hoping there’s something out there to handle this cleanly. Right now, I’m thinking there are three potential solutions for this. First, I can detect if someone is doing a shift-click by listening for the shift button being depressed. If they do a shift click, then I’d need to figure out which options are in between the last option that was clicked and the option that was shift-clicked and mark them as selected. Second, I can handle the onInput event of the select element and call out to a port to get a comprehensive list of all of the selected options. Three, I can leverage some sort of event or facility of Elm to get at this information. I’m hoping three is the answer.
Does anyone have any experience with this sort of thing? Any ideas on what the best approach would be?
Cheers,
Eric