A multi select with search in liveview

PhoenixSelect2 is a LiveComponent to facilitate the use of multi select with search. Normally I use Select2 to make a multiselect that has search and can add and remove items, but I was bothered by the need to always use hooks and have a lot of interaction with direct JS to handle the events. So, this library is basically a copy (literally in the case of the CSS used) of this library in react, but the whole flow of adding, removing and searching the options was done using LiveView.

Two important points of this library are that:

  • It has a hint of Alpine to perform some transitions and hide the selection bar.
  • I still haven’t learned how to test live_components

In the second case help and suggestions are welcome! In the first case I would need to use newer versions of LiveView in order to replace the use of alpine with phx-clickaway, which won’t be possible since I want to support older versions.

PS: is not production ready!!!


You can create a simple liveview in your test that contains the component and test that.

1 Like