naymspace
Create Combobox component
Fields like Backpex.Fields.MultiSelect and Backpex.Fields.HasMany come with a multi select. This multi select uses a daisyUI dropdown under the hood that contains a list of checkboxes.
See https://github.com/naymspace/backpex/blob/0.11.0/lib/backpex/html/form.ex#L246
The Backpex multi select component has some limitations:
- The number of fetched options cannot be limited (might be a problem for huge lists)
- It has issues when being used inside elements that have an overflow defined (e.g., in tables or in resource action modals)
- It cannot be reused in other places
- It is difficult to limit min or max selected values
- Selection / Deselection does not always trigger form validation (see
Backpex.Fields.MultiSelect)
The goal is to create a generic Combobox / Autocomplete / MuliSelect component that is easy to use inside Backpex fields (HasMany, MultiSelect) as well as in filters (MultiSelect filter) and outside Backpex.
We might want to use some JavaScript to reduce server roundtrips, as we can now provide hooks via Backpex.
It is a good idea to make it work with single and multiple values so that it can be used for Selects (e.g., Backpex.Fields.BelongsTo) as it would be great to have a search functionality there, too.
Examples
Some examples of Comboboxes with a good UX.
- https://mantine.dev/core/multi-select/
- https://petal.build/components/combo-box
- https://fluxonui.com/components/autocomplete
- https://ui.shadcn.com/docs/components/combobox
