New combobox component

[stephannv]

EDIT:
After some problems with combobox dialog we are keeping the floating-ui popover. I spent 2 days trying to make it work with anchor-positioning polyfill but I got no success due to some anchor-name/position-anchor property strange behavior. Other update: We are using radio/checkbox to control combobox inputs instead of a hidden select.

Screen.Recording.2024-12-04.at.14.51.56.mov

---

ORIGINAL:
@cirdes asked me to build a combobox with multiselect. I started building a new component (Multiselect) inspired by how <select multiple> behaves on mobile browsers, which opens a dialog with options instead a dropdown widget. But after some discussions, Cirdes and I agreed that we should build the new component as an evolution of current combobox. We read some texts and docs and got inspiration from OpenUI combobox proposal: https://open-ui.org/components/combobox.explainer. Floating-ui was removed in favor of native dialog component.

Demo:

Combobox(multiple: true, term: "frameworks") do
  ComboboxInput(name: "multiple")

  ComboboxTrigger placeholder: "Select your framework"

  ComboboxDialog do
    ComboboxSearchInput(placeholder: "Type the framework name")

    ComboboxDatalist do
      ComboboxEmptyState { "No results" }

      ComboboxOptgroup label: "Ruby" do
        ComboboxOption(value: "rails") { "Rails" }
        ComboboxOption(value: "hanami") { "Hanami" }
      end

      ComboboxOptgroup label: "Crystal" do
        ComboboxOption(value: "lucky", selected: true) { "Lucky" }
        ComboboxOption(value: "kemal") { "Kemal" }
      end

      ComboboxOptgroup label: "Others" do
        ComboboxOption(value: "django",) { "Django" }
        ComboboxOption(value: "laravel") { "Laravel" }
      end


      ComboboxOption(value: "spring",) { "Spring" }
      ComboboxOption(value: "vraptor") { "VRaptor" }
    end
  end
end

Screen.Recording.2024-11-29.at.13.57.40.mov

[cirdes]

It's great not to have to use any dependencies for dialogs!

[cirdes]

that is a great idea to use a hidden select to hold the values and submit the options

[cirdes]

I was wondering if this would work if the combobox components were loaded using Turbo/async. Relying on JavaScript to create elements might be risky.

[pierry01]

we have a good syntax for classes with big strings
classes | focus-visible classes | disabled classes

Suggested change

	class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary",
	class: [
	"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
	"disabled:cursor-not-allowed disabled:opacity-50"
	]

[stephannv]

Boa, acho que vai ajudar bastante mesmo a manter organizado.

[pierry01]

insane!

[cirdes]

Congratulations, @stephannv! It’s incredible to see that the combobox now supports multiple items.

[stephannv]

Converting to draft while we apply the new combobox on a real application.
To do:
[ ] Jean's suggestions
[ ] Add flip() to popover.

[sethhorsley]

Wow this is great!!