- support for LiveView 1.0.0
- add options clear_tag_button_class and clear_tag_button_extra_class to style button to clear tags
- fix bug where selection was not restored after focus+blur when value is pre-selected or forced
do not restore selection after blur it it was cleard by hitting the clear button
- fix bug introduced by LV-1.0's new focus behavior (#72)
- support for associations and embeds
- add
value_mapper
assign anddecode/1
function
- add slot to render custom clear button
- add option to extend clear button style
- updated dependencies, including updating
phoenix_html
to4.0.0
- bugfix: only set selection in client if event was sent to this component
- added support for selection recovery. Upon reconnection, the client sends an event (
selection_recovery
) that contains the latest selection. This allows recovery of the selection that was active before the view disconnected.
- daisyui3-compatible
- arrowUp when there is no active option navigates to the last option
- scroll options into view when they become active
- fix bug that was causing dropdown to overflow container (#43)
- add
clear_button_class
option to style clear buttons for tags and selection - various bugfixes and improvements
- accept
sticky
flag in an option to prevent it from being removed (#33) - when selection becomes empty, an update is triggered with a hidden field named after
live_select
's field's name
(thanks to https://github.com/shamanime for both changes)
- add
phx-focus
andphx-blur
options to specify events to be sent to the parent upon focus and blur of the text input field - send live_select_change event directly from JS hook to save a round-trip
- expects a single
field
assign of typePhoenix.HTML.FormField
instead of separate form and field assigns (which is still supported but soft-deprecated with a warning)
- Do not use name attribute on non-input elements to prevent LV from crashing
- Change default for update_min_len to 1
- Programmatically override selection with value assign
- Only clear options if entered text is shorter than update_min_len and user types backspace
Bugfix: fix selection via mouseclick not working when rendering nested elements in the :option slot
styling options now also accept lists of strings
Bugfix: fix error when using atom form
This version introduces the following breaking changes and new features:
- Rendering using a function component
<.live_select />
instead of the 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
:option
and:tag
slots
** How to upgrade from version 0.x.x: **
- Instead of rendering LiveSelect in this way:
<%= live_select form, field, mode: :tags %>
, render it in this way:<.live_select form={form} field={field} mode={:tags} />
- Don't forget to add
phx-target={@myself}
if you're using LiveSelect from another LiveComponent - Turn your
handle_info/2
implementations intohandle_event/3
:
Turn this:
def handle_info(%ChangeMsg{} = change_msg, socket) do
options = retrieve_options(change_msg.text)
send_update(LiveSelect.Component, id: change_msg.id, options: options)
{:noreply, socket}
end
into:
def handle_event("live_select_change", %{"text" => text, "id" => live_select_id}, socket) do
options = retrieve_options(text)
send_update(LiveSelect.Component, id: live_select_id, options: options)
{:noreply, socket}
end
- If you're rendering LiveSelect in a LiveComponent, you can now place your
handle_event/3
callback in the LiveComponent, there's no need to put the update logic in the view anymore
Bugfix: component now works event when strict Content Security Policy are set
- add
available_option_class
configuration option to style options that have not been selected yet - add
user_defined_options
configuration option to allow user to enter any tag - enable assigning a custom id to the component
- enable programmatically clearing of the selection via
clear
assign - add
allow_clear
configuration option. If set, anx
button will appear next to the text input in single mode. Clicking the button clears the selection
LiveSelect.update_options/2 has been deprecated in favor of directly using Phoenix.LiveView.send_update/3
- set initial selection from the form or manually with
value
option - set initial list of available options with
options
option - add a
max_selectable
option to limit the maximum size of the selection
Bugfix: options in dropdown not always clickable because of race condition with blur event (#7)
Bugfix: removed inputs_for because it was failing if the field is not an association
- tags mode
- hide dropdown on escape key pressed
- when disabled option is used, also disable hidden input
- style disabled text input in tailwind mode
- fix problem with selection via mouseclick when an input field is underneath the dropdown
- hide dropdown when user clicks away from component or input loses focus
- show dropdown when input obtains focus again
- using default black text in tailwind mode
- support for tailwind styles (now the default)
- more opinionated default styles
- ability to selectively remove classes from style defaults using the !class_name notation
- rename option search_term_min_length to update_min_len
- better error messages
- various improvements to the showcase app
- raise if class and extra_class options are used in invalid combinations (#2)
- route server events to the right live select component using the component
id
(#1)
- rename LiveSelect.update/2 to LiveSelect.update_options/2
- add debounce option
- add search delay option to showcase app
- JSON-encode option values before assigning them to the hidden input field
- add LiveSelect.ChangeMsg struct to be used as change message
- Disable input field via options
- Placeholder text via options
- Improve docs and showcase app
- Remove setting component id via options
- Use atoms as field names, because strings are not accepted by Ecto forms
- Remove all colors from default daisyui styles
- Improve styling of showcase app
- Improve docs
- Remove the
msg_prefix
option in favor ofchange_msg
First version 🎉