fix multiselect combobox

go/cmd/examples/go-wasm-web/app/kit.go

@@ -1,6 +1,8 @@
 package app
 
 import (
+	"strings"
+
 	. "kjol/vdom"
 	ui "kjol/webui"
 )
@@ -31,6 +33,20 @@ func ptRow(name, plan string, status *VNode) *VNode {
 	)
 }
 
+// languageOptions is deliberately longer than the pill limit, so the multi-select
+// demonstrates both ways it collapses: past 3 selections it says "N items selected"
+// outright, and below that it still collapses if the pills are too wide for the field.
+func languageOptions() []ui.FormSelectOption {
+	return []ui.FormSelectOption{
+		{Value: "go", Label: "Go"},
+		{Value: "rust", Label: "Rust"},
+		{Value: "ts", Label: "TypeScript"},
+		{Value: "python", Label: "Python"},
+		{Value: "kotlin", Label: "Kotlin"},
+		{Value: "swift", Label: "Swift"},
+	}
+}
+
 //gowasm:page /kit layout=app
 func KitPage(d Deps) func() *VNode {
 	// Interactive demos own their state via signals (a write re-renders).
@@ -41,6 +57,7 @@ func KitPage(d Deps) func() *VNode {
 	name := NewSignal("")
 	email := NewSignal("")
 	plan := NewSignal("pro")
+	langs := NewSignal([]string{"go"})
 
 	// Floating components are CONTROLLERS: they own refs, timers and open state, so
 	// they are built once here — never inside the render closure below, which would
@@ -48,6 +65,7 @@ func KitPage(d Deps) func() *VNode {
 	modal := ui.NewModal(ui.ModalOptions{Size: ui.ModalMedium})
 	menu := ui.NewMenu(ui.MenuOptions{Placement: ui.PlacementBottomStart})
 	tip := ui.NewHoverTooltip(ui.PlacementTop, "")
+	skills := ui.NewMultiSelect(ui.DropdownOptions{})
 
 	return func() *VNode {
 		return Div(Attr("class", "space-y-8"),
@@ -134,9 +152,23 @@ func KitPage(d Deps) func() *VNode {
 							ui.FormOption("free", "Free", false),
 							ui.FormOption("pro", "Pro", false),
 							ui.FormOption("enterprise", "Enterprise", false))),
+
+					// A multi-select. Its rows carry checkboxes, and the field shows the
+					// selection as removable pills — until they stop fitting, at which point
+					// it collapses to "N items selected". Tick a few and watch it flip.
+					row("flex flex-col gap-1", ui.FormLabel(ui.FormLabelProps{}, Text("Languages")),
+						skills.Render(ui.FormMultiSelectProps{
+							Options:       languageOptions(),
+							Value:         langs.Get(),
+							Placeholder:   "Pick a few",
+							Searchable:    true,
+							ShowSelectAll: true,
+							OnChange:      func(v []string) { langs.Set(v) },
+						})),
 				),
 				P(Attr("class", "text-xs text-neutral-500"),
-					Text("Live: name=\""+name.Get()+"\"  email=\""+email.Get()+"\"  plan=\""+plan.Get()+"\"")),
+					Text("Live: name=\""+name.Get()+"\"  email=\""+email.Get()+"\"  plan=\""+plan.Get()+
+						"\"  languages="+strings.Join(langs.Get(), ","))),
 			),
 
 			kitSection("Table",