awesome! can’t wait for the events based approach.
i’m going to test this thing out again this week as i just really need it 
KristerV
trisolaran
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:
- Rendering using a (sexy, new) function component
<.live_select />instead of the (unsexy, old) function style<%= live_select ... %> - Dropping the message-based update cycle (which used
handle_info/2) in favour of an event-based update cycle (which useshandle_event/3). This makes it much easier and more intuitive to use LiveSelect from another LiveComponent. - Ability to customize the default rendering of dropdown entries and tags using the
:optionand:tagslots
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 /> <%= option.label %>
</div>
</:option>
<:tag :let={option}>
<.check /> <%= option.label %>
</:tag>
</.live_select>
which would result in this:
Thanks to anyone who provided feedback so far!
Cheers,
Max
14
zachallaun
KristerV
so nice. just updated. plays so well with my components (many of which are generated by phoenix).
thanks a lot! well deserved version number 
2
trisolaran
BartOtten
Congratz with the 1.0.0 release! You certainly put a lot of effort in it. Thanks for contributing to the ecosystem. One day I’m sure I’ll get to this lib for a webapp I’ll build in the future
2
milangupta
Hi @trisolaran,
Firstly, kudos .. your component has matured really nicely ! It is really well thought through and flexible.
I am trying to figure out one kink I am having around the “clickable” area for the options.
Here is how I am calling live_select -
<.live_select
form={f}
field={:currency_code}
placeholder="Select a Currency"
update_min_len={1}
style={:daisyui}
>
<:option :let={option}>
<div class="flex">
<img src={option.country_flag} class="avatar text-sm w-12 square" />
</div>
</:option>
</.live_select>
The issue I am seeing is that the change event doesn’t fire on clicking the image (flag). It only fires when clicking on the blank space on the right of the flag. I have tried various options around styling (tailwind vs daisyui) as well as using block vs. flex. Behavior remains the same ..
Updated : A bit more info - the content that is drawn from the :option slot appears to be obscuring the pointer behavior for the selected option. As long as I click outside the outlined content for the selected dropdown option, it works. Attaching a graphic also.
Any pointers ?
0
trisolaran
Hi @milangupta and thanks for the nice words.
Also thanks for finding this is bug, I was able to reproduce it.
I pushed a fix on main. Can you please try your application against the latest live_select’s main and let me know?
2
milangupta
Unfortunately, still no luck. I made sure I was pointed to github main branch and that the changes reflected in my deps.
Here is a better picture .. I put the “outline” tag around the custom option elements to show this more clearly. The option when hovered over greys out correctly. However, the selection does not fire if mouse is in the outlined box.
I was suspecting this is some css thing .. was looking at z-index etc. It looks like the underlying element is the dropdown option with the registered click handler, however, the custom option elements from the slot are not within that / just overlayed.
0
milangupta
Adding z-0 (z-index) to the div wrapper fixed it !
I unfortunately don’t understand it enough to explain why ..
<.live_select
form={f}
field={:currency_code}
placeholder="Select a Currency"
update_min_len={1}
style={:daisyui}
>
<:option :let={option}>
<div class="flex outline z-0">
<img src={option.country_flag} class="avatar text-sm " />
<%= option.currency_code <>
" | " <> option.country_name <> " | " <> String.upcase(option.currency_name) %>
</div>
</:option>
</.live_select>
0