feat(combobox): shadcn visual revamp with chips, keyboard nav, and accessibility

Author: djalmaaraujo

lib/ruby_ui/combobox/combobox.rb

@@ -19,7 +19,13 @@ def default_attrs
         data: {
           controller: "ruby-ui--combobox",
           ruby_ui__combobox_term_value: @term,
-          action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
+          action: %w[
+            turbo:morph@window->ruby-ui--combobox#updateTriggerContent
+            keydown.down->ruby-ui--combobox#keyDownPressed
+            keydown.up->ruby-ui--combobox#keyUpPressed
+            keydown.enter->ruby-ui--combobox#keyEnterPressed
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
+          ]
         }
       }
     end

lib/ruby_ui/combobox/combobox_badge_trigger.rb

@@ -2,62 +2,46 @@
 
 module RubyUI
   class ComboboxBadgeTrigger < Base
-    def initialize(placeholder: "", **)
+    def initialize(placeholder: "", clear_button: false, **)
       @placeholder = placeholder
+      @clear_button = clear_button
       super(**)
     end
 
     def view_template(&)
       div(**attrs) do
-        div(data: {ruby_ui__combobox_target: "badgeContainer"}, class: "contents")
+        div(data: {ruby_ui__combobox_target: "badgeContainer"}, class: "hidden")
         input(
           type: "text",
-          class: "flex-1 min-w-[80px] bg-transparent border-0 outline-none focus:ring-0 placeholder:text-muted-foreground text-sm",
+          class: "flex-1 min-w-8 bg-transparent border-0 px-0 outline-none focus:ring-0 placeholder:text-muted-foreground text-sm",
           autocomplete: "off",
           autocorrect: "off",
           spellcheck: "false",
           placeholder: @placeholder,
           data: {
             ruby_ui__combobox_target: "badgeInput",
-            # JS implementation in combobox_controller.js
             action: "keyup->ruby-ui--combobox#filterItems input->ruby-ui--combobox#filterItems keydown.backspace->ruby-ui--combobox#handleBadgeInputBackspace"
           }
         )
-        yield if block_given?
-        chevron_icon
+        render ComboboxClearButton.new if @clear_button
       end
     end
 
     private
 
+    # JS-toggled classes (referenced here so Tailwind compiles them): h-auto min-h-9 pt-1.5
     def default_attrs
       {
-        class: "flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text",
+        class: "flex h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text",
         data: {
           ruby_ui__combobox_target: "trigger",
-          action: "click->ruby-ui--combobox#openPopover"
+          action: "click->ruby-ui--combobox#openPopover focusin->ruby-ui--combobox#openPopover"
         },
         aria: {
           haspopup: "listbox",
           expanded: "false"
         }
       }
     end
-
-    def chevron_icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        class: "ml-2 h-4 w-4 shrink-0 opacity-50",
-        stroke_width: "2",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      ) do |s|
-        s.path(d: "m7 15 5 5 5-5")
-        s.path(d: "m7 9 5-5 5 5")
-      end
-    end
   end
 end

lib/ruby_ui/combobox/combobox_clear_button.rb

@@ -27,7 +27,7 @@ def view_template
     def default_attrs
       {
         type: "button",
-        class: "ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none hidden",
+        class: "ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden",
         aria: {label: "Clear selection"},
         data: {
           ruby_ui__combobox_target: "clearButton",

lib/ruby_ui/combobox/combobox_controller.js

@@ -29,6 +29,11 @@ export default class extends Controller {
     this.updateBadges()
     this.updateClearButton()
     this.updateInputTrigger()
+
+    // Track mouse state to distinguish click-focus from tab-focus
+    this._mouseDown = false
+    this.element.addEventListener("mousedown", () => { this._mouseDown = true })
+    this.element.addEventListener("mouseup", () => { setTimeout(() => { this._mouseDown = false }, 0) })
   }
 
   disconnect() {
@@ -48,7 +53,12 @@ export default class extends Controller {
   }
 
   openPopover(event) {
-    if (event && event.type !== "focus") event.preventDefault()
+    if (event && event.type !== "focusin" && event.type !== "focus") event.preventDefault()
+
+    // focusin/focus: only open on keyboard focus (tab), not mouse click
+    if (event && (event.type === "focusin" || event.type === "focus")) {
+      if (this._mouseDown || this.triggerTarget.ariaExpanded === "true" || this._closingPopover) return
+    }
 
     this.updatePopoverPosition()
     this.updatePopoverWidth()
@@ -57,17 +67,19 @@ export default class extends Controller {
     this.itemTargets.forEach(item => item.ariaCurrent = "false")
     this.popoverTarget.showPopover()
 
+    // Always show all items on open; filter only on user typing
+    this.applyFilter("")
+
     if (this.hasBadgeInputTarget) {
       this.badgeInputTarget.value = ""
-      this.applyFilter("")
-    } else if (this.hasInputTriggerTarget) {
-      this.applyFilter(this.inputTriggerTarget.value)
     }
   }
 
   closePopover() {
+    this._closingPopover = true
     this.triggerTarget.ariaExpanded = "false"
     this.popoverTarget.hidePopover()
+    setTimeout(() => this._closingPopover = false, 200)
   }
 
   handlePopoverToggle(event) {
@@ -149,14 +161,19 @@ export default class extends Controller {
   }
 
   updateTriggerContent() {
+    if (!this.hasTriggerContentTarget) return
+
     const checkedInputs = this.inputTargets.filter(input => input.checked)
 
     if (checkedInputs.length === 0) {
       this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder
+      this.triggerContentTarget.classList.add("text-muted-foreground")
     } else if (this.termValue && checkedInputs.length > 1) {
       this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`
+      this.triggerContentTarget.classList.remove("text-muted-foreground")
     } else {
       this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(", ")
+      this.triggerContentTarget.classList.remove("text-muted-foreground")
     }
   }
 
@@ -166,25 +183,48 @@ export default class extends Controller {
     this.inputTriggerTarget.value = checked ? this.inputContent(checked) : ""
   }
 
-  // NOTE: badge HTML mirrors ComboboxBadge Ruby component. Update both if styles change.
+  // NOTE: badge classes mirror ComboboxBadge Ruby component. Update both if styles change.
   updateBadges() {
     if (!this.hasBadgeContainerTarget) return
 
-    this.badgeContainerTarget.innerHTML = ""
+    // Remove existing badges
+    this.triggerTarget.querySelectorAll("[data-combobox-badge]").forEach(el => el.remove())
+
+    const checkedInputs = this.inputTargets.filter(input => input.checked)
+
+    // Toggle trigger height: h-9 when empty, h-auto min-h-9 when badges exist
+    if (checkedInputs.length > 0) {
+      this.triggerTarget.classList.remove("h-9")
+      this.triggerTarget.classList.add("h-auto", "min-h-9")
+    } else {
+      this.triggerTarget.classList.remove("h-auto", "min-h-9", "pt-1.5")
+      this.triggerTarget.classList.add("h-9")
+    }
 
-    this.inputTargets.filter(input => input.checked).forEach(input => {
+    checkedInputs.forEach(input => {
       const badge = document.createElement("span")
+      badge.setAttribute("data-combobox-badge", "")
       badge.className = "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"
       badge.dataset.value = input.value
 
-      const label = document.createTextNode(this.inputContent(input))
-      badge.appendChild(label)
+      badge.appendChild(document.createTextNode(this.inputContent(input).trim()))
 
       const btn = document.createElement("button")
       btn.type = "button"
-      btn.dataset.action = "ruby-ui--combobox#removeBadge"
       btn.setAttribute("aria-label", "Remove")
-      btn.className = "rounded-sm opacity-50 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      btn.className = "rounded-sm opacity-50 hover:opacity-100 focus-visible:outline-none"
+
+      btn.addEventListener("click", (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+        const target = this.inputTargets.find(i => i.value === input.value)
+        if (target) {
+          target.checked = false
+          this.updateBadges()
+          this.updateClearButton()
+        }
+      })
 
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
       svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
@@ -196,6 +236,7 @@ export default class extends Controller {
       svg.setAttribute("stroke-width", "2")
       svg.setAttribute("stroke-linecap", "round")
       svg.setAttribute("stroke-linejoin", "round")
+      svg.classList.add("pointer-events-none")
 
       const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path")
       path1.setAttribute("d", "M18 6 6 18")
@@ -207,8 +248,18 @@ export default class extends Controller {
       btn.appendChild(svg)
       badge.appendChild(btn)
 
-      this.badgeContainerTarget.appendChild(badge)
+      // Insert badge directly in trigger, before the text input
+      this.badgeInputTarget.insertAdjacentElement("beforebegin", badge)
     })
+
+    // Add top padding only when badges wrap to multiple lines
+    // Class "pt-1.5" is referenced in ComboboxBadgeTrigger for Tailwind to compile it
+    const badges = this.triggerTarget.querySelectorAll("[data-combobox-badge]")
+    if (badges.length > 0 && this.badgeInputTarget.offsetTop > badges[0].offsetTop) {
+      this.triggerTarget.classList.add("pt-1.5")
+    } else {
+      this.triggerTarget.classList.remove("pt-1.5")
+    }
   }
 
   updateClearButton() {
@@ -255,17 +306,19 @@ export default class extends Controller {
 
     this.emptyStateTarget.classList.toggle("hidden", resultCount !== 0)
 
-    // Auto-highlight first visible result
+    // Auto-highlight first visible result (without scrolling to avoid page jump)
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
     const firstVisible = this.inputTargets.find(i => !i.parentElement.classList.contains("hidden"))
     if (firstVisible) {
       this.selectedItemIndex = 0
-      this.focusSelectedInput()
+      firstVisible.parentElement.ariaCurrent = "true"
     }
   }
 
   // Keyboard
 
-  keyDownPressed() {
+  keyDownPressed(event) {
+    event.preventDefault()
     if (this.selectedItemIndex !== null) {
       this.selectedItemIndex++
     } else {
@@ -275,7 +328,8 @@ export default class extends Controller {
     this.focusSelectedInput()
   }
 
-  keyUpPressed() {
+  keyUpPressed(event) {
+    event.preventDefault()
     if (this.selectedItemIndex !== null) {
       this.selectedItemIndex--
     } else {

lib/ruby_ui/combobox/combobox_docs.rb

@@ -18,26 +18,21 @@ def view_template
                 ComboboxList do
                   ComboboxEmptyState { "No results found." }
 
-                  ComboboxListGroup(label: "Ruby") do
-                    ComboboxItem do
-                      ComboboxRadio(name: "framework", value: "rails")
-                      span { "Rails" }
-                    end
-                    ComboboxItem do
-                      ComboboxRadio(name: "framework", value: "hanami")
-                      span { "Hanami" }
-                    end
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "rails")
+                    span { "Rails" }
                   end
-
-                  ComboboxListGroup(label: "JavaScript") do
-                    ComboboxItem do
-                      ComboboxRadio(name: "framework", value: "nextjs")
-                      span { "Next.js" }
-                    end
-                    ComboboxItem do
-                      ComboboxRadio(name: "framework", value: "nuxt")
-                      span { "Nuxt" }
-                    end
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "hanami")
+                    span { "Hanami" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "nextjs")
+                    span { "Next.js" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "nuxt")
+                    span { "Nuxt" }
                   end
                 end
               end
@@ -81,34 +76,43 @@ def view_template
         <<~RUBY
           div(class: "w-96") do
             Combobox do
-              ComboboxBadgeTrigger(placeholder: "Select frameworks...") do
-                ComboboxClearButton()
-              end
+              ComboboxBadgeTrigger(clear_button: true)
 
               ComboboxPopover do
                 ComboboxList do
                   ComboboxEmptyState { "No results found." }
 
-                  ComboboxListGroup(label: "Ruby") do
-                    ComboboxItem do
-                      ComboboxCheckbox(name: "frameworks[]", value: "rails")
-                      span { "Rails" }
-                    end
-                    ComboboxItem do
-                      ComboboxCheckbox(name: "frameworks[]", value: "hanami")
-                      span { "Hanami" }
-                    end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "rails")
+                    span { "Rails" }
                   end
-
-                  ComboboxListGroup(label: "JavaScript") do
-                    ComboboxItem do
-                      ComboboxCheckbox(name: "frameworks[]", value: "nextjs")
-                      span { "Next.js" }
-                    end
-                    ComboboxItem do
-                      ComboboxCheckbox(name: "frameworks[]", value: "nuxt")
-                      span { "Nuxt" }
-                    end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "hanami")
+                    span { "Hanami" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "sinatra")
+                    span { "Sinatra" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "nextjs", checked: true)
+                    span { "Next.js" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "nuxt")
+                    span { "Nuxt" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "svelte")
+                    span { "SvelteKit" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "remix")
+                    span { "Remix" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "astro")
+                    span { "Astro" }
                   end
                 end
               end