LiveSelect - Dynamic selection input component for LiveView

News Announcing
, , ,
33

Version 1.0.0 is here :tada: :monkey:

Happy to announce this release. It’s been a lot of work, and I definitely fancy a little break from LV :laughing:, 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

14 Likes