Version 1.0.0 is here

Happy to announce this release. It’s been a lot of work, and I definitely fancy a little break from LV , but I’m glad this is finally out!

Here’s the changes:

1. Rendering using a (sexy, new) function component <.live_select /> instead of the (unsexy, old) function style <%= live_select ... %>
2. Dropping the message-based update cycle (which used handle_info/2) in favour of an event-based update cycle (which uses handle_event/3). This makes it much easier and more intuitive to use LiveSelect from another LiveComponent.
3. Ability to customize the default rendering of dropdown entries and tags using the :option and :tag slots

Change (2) is the most important one: folks who were using LiveSelect from a LiveComponent were annoyed because LiveSelect was using messages to request an update, and messages can’t be received by LiveComponents. This was forcing users to place the update logic in the LiveView and not in the LiveComponent where it would naturally reside. But now you can just do:

<.live_select form={form} field={field} mode={:tags} phx-target={@myself} />

and

def handle_event("live_select_change", %{"text" => text, "id" => live_select_id}, socket) do
   send_update(LiveSelect.Component, id: live_select_id, options: retrieve_options(text))
end

All in your LiveComponent (or LiveView), and you’re good.

I hope that folks who use LiveComponent-based forms will have a more pleasant experience now.

Change (3) is also kind of cool: you can now override rendering of tags and options using slots.
Say you want to add an icon to your tags or options. Now you can do:

<.live_select ...  >
        <:option :let={option}>
          <div class="flex">
            <.globe />&nbsp;<%= option.label %>
          </div>
        </:option>
        <:tag :let={option}>
            <.check />&nbsp;<%= option.label %>
        </:tag>
</.live_select>

which would result in this:

Thanks to anyone who provided feedback so far!

Cheers,
Max

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
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

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

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.

Version 1.4.0 released with support for associations/embeds

This latest release includes support for displaying and selecting associations and embeds using LiveSelect.

This is something quite a few folks were trying to do, and were experiencing considerable frustration in the process. Not surprisingly! LiveSelect was designed to work well with simple values like strings and numbers, and although it was able to encode arbitrary values in its options, it wasn’t able to deal with complex values or changesets from a form.

Now this has changed, and users should be able to deal with associations/embeds with only minimal hassle. This section in the docs explains how to do it with the help of an example.

As usual, feedback is very welcome! Please do open an issue if anything is weird/doesn’t work/could be improved

Thanks again to everyone who used this component!

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:

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!

Looking forward to your feedback. Cheers!

Version 1.5.0 is out

Thanks to @ringvold’s great work, this version introduces a new mode called quick_tags. In this mode, the dropdown stays open after selection, allowing the user to select additional elements in quick succession. Also, elements can be deselected via the dropdown, too. Here it goes:

As an extra bonus, @ringvold also added a toggle to the showcase app that styles the options in the dropdown as checkboxes using slots. Nice.

Thanks again @ringvold!