trisolaran

trisolaran OP

A quick answer from the road on this one. This is explained in the docs:

Whenever an option is selected, LiveSelect will trigger a standard phx-change event in the form. See the “Examples” section below for details on how to handle the event.

A live select input behaves like an ordinary select input, the change event is triggered when the user selects one of the options. No need to implement new messages. Let me know if this isn’t explained clearly enough in the docs or if you’re still struggling.

0
Post #11
trisolaran

trisolaran OP

I assume you’re refering to this. This is intentional: you don’t want the change event in the form to fire whenever the user types something in the text input, but only when they select an option. Handling the ChangeMsg message is the proper way to be notified of and react to changes in the text input.

This is an interesting use case and, as you apparently already found out, is best handled in the parent LV by keeping track in the assigns of what is selected in each liveselect input and using this state to determine the options to send to a liveselect when the ChangeMsg message is received.

Interesting use case I didn’t think about. I never nest live components, but I can imagine how this could be desirable in some (perhaps rare) cases. The problem here is that messages can’t be handled in live components, only events can, and ChangeMsg is a message. Maybe one way would be to turn ChangeMsg into a custom event and route it to the parent component using phx-target. The parent component could communicate its “address” to live select using the @myself assign. Just an idea, will think about it. Let me know what you think.

0
Post #12
trisolaran

trisolaran OP

Hello! I released a new version of LiveSelect (0.2.0), which finally supports built-in default styles for tailwindcss, without the need to use daisyui :tada:
So now the default is to use basic tailwindcss, with daisyui as an option. Of course, all the styles are still completely customizable. Thanks to everyone who gave feedback and special thanks to @mindok for finding a bug :bug:

You can use the included showcase app to configure LiveSelect on the fly and play around with all the options and styles to see what they look like. You can even see LV events and messages in flight:

Check it out, I think it’s pretty cool :slight_smile:

I hope that now more people will be interested in trying out this library. So: If you need a dynamic selection field for your LiveView, resist the temptation to RollYourOwn™ (trust me: it’s no fun) and take LiveSelect for a spin.

11
Post #13
ivanminutillo

ivanminutillo

Great work @trisolaran !!! Totally agree with you that implementing a multiselect from scratch is no fun at all :)) i’m planning to use ti soon, also great to see that multiple options mode is in your todo <3

1
Post #14
trisolaran

trisolaran OP

thanks for the words of encouragement @ivanminutillo. Much appreciated! The multi-select option is the (last?) big thing missing. Hopefully I’ll be able to find some time to work on it soon.

2
Post #15
Theosaurus-Rex

Theosaurus-Rex

Hey friend, the multiselect in your roadmap is EXACTLY what I have been looking for! Is there somewhere I can sponsor you or otherwise throw some money your way to support this?

3
Post #16
trisolaran

trisolaran OP

dude, money isn’t a problem: time is :slight_smile:
I’m currently swamped with work + family-related stuff, but I’m confident I’ll find some time to spend on this in a month or so. Stay tuned.

3
Post #17
trisolaran

trisolaran OP

Finally: version 0.3.0 with multiselect support is out

LiveSelect now accepts a new :mode option, which takes either :single or :tags as value. :single mode is the old single-selection mode you already know. :tags mode turns the component into a multiselect input with tags:

DEMO

I didn’t simply call it :multiple because I envision new multiselect modes in the future with different flavors, for example using checkboxes in the dropdown.

As usual, all new elements (these includes the single tags as well as the box containing them) can be styled by passing the appropriate options.

And as usual, you can experiment with all the options by running the showcase app locally.

I hope folks who were waiting on the multiselect feature will be satisfied! :rocket:

Looking forward to your feedback. Cheers! :beers:

10
Post #18
linusdm

linusdm

Hey @trisolaran, nice work!

I’m curious if there is a way to set an initial selection of tags, for example when editing an existing record that comes from the database. I see there is an outstanding issue related to this feature. But maybe it’s already possible with some kind of workaround?

On another note: it would lower the barrier to play around with this library if you would deploy the demo application somewhere (fly.io comes to mind), to see it immediately in action, without having to start the application yourself.

1
Post #19
trisolaran

trisolaran OP

thanks @linusdm

Not a good one unfortunately, no. You can use the options assign (only documented in master, but works also in the hex release) to pass an initial set of available options, but not an initial selection.
This will become possible when the issue you mentioned is resolved (I’m working on it)

Totally agree. It’s been on the back-burner for some time, I hope I’ll be able to get to it soon.

1
Post #20