Merge pull request #34 from plausible/native-disabled

Listbox disabled state (native)

Author: RobertJoonas

assets/js/hooks/listbox.js

@@ -27,17 +27,14 @@ const SELECTORS = {
 export default {
   mounted() {
     this.initialize()
-    this.syncSelectionFromInput()
   },
 
   updated() {
     this.initialize()
-    this.syncSelectionFromInput()
   },
 
   reconnected() {
     this.initialize()
-    this.syncSelectionFromInput()
   },
 
   destroyed() {
@@ -48,6 +45,8 @@ export default {
     this.cleanup()
     this.setupElements()
     this.setupEventListeners()
+    this.syncDisabledState()
+    this.syncSelectionFromInput()
     this.el.setAttribute('data-prima-ready', 'true')
   },
 
@@ -75,9 +74,15 @@ export default {
     this.syncSelectedState(option)
   },
 
+  syncDisabledState() {
+    const disabled = this.el.getAttribute('data-disabled') === 'true'
+    this.refs.button.disabled = disabled
+    if (disabled && this.isListboxVisible()) this.hideListbox()
+  },
+
   setupEventListeners() {
     this.listeners = [
-      [this.refs.button, 'click', this.handleToggle.bind(this)],
+      [this.refs.button, 'click', this.toggleListbox.bind(this)],
       [document, 'click', this.handleClickOutside.bind(this)],
       [this.refs.listbox, 'mouseover', this.handleMouseOver.bind(this)],
       [this.refs.listbox, 'click', this.handleListboxClick.bind(this)],
@@ -110,6 +115,8 @@ export default {
   },
 
   handleKeydown(e) {
+    if (this.refs.button.disabled) return
+
     const keyHandlers = {
       [KEYS.ARROW_UP]: () => this.navigateUp(e),
       [KEYS.ARROW_DOWN]: () => this.navigateDown(e),
@@ -231,10 +238,6 @@ export default {
     this.setFocus(matchingOptions[nextIndex])
   },
 
-  handleToggle() {
-    this.toggleListbox()
-  },
-
   handleClickOutside(e) {
     if (this.isListboxVisible() && !this.refs.button.contains(e.target) && !this.refs.listbox.contains(e.target)) {
       this.hideListbox()
@@ -249,6 +252,8 @@ export default {
   },
 
   handleListboxClick(e) {
+    if (this.refs.button.disabled) return
+
     const option = e.target.closest(SELECTORS.OPTION)
     if (option && option.getAttribute('aria-disabled') !== 'true') {
       this.selectOption(option)
@@ -271,9 +276,7 @@ export default {
     this.refs.value.textContent = option.getAttribute('data-display')
   },
 
-  // Mount-time sync only: the displayed value is rendered by the caller and is
-  // already correct on first paint, so only the ARIA/visual selection markers
-  // are synced here - the value itself is left untouched.
+  // Sync selection markers without changing the caller-rendered displayed value.
   syncSelectedState(option) {
     this.el.querySelector(SELECTORS.SELECTED_OPTION)?.removeAttribute('aria-selected')
     this.el.querySelectorAll('[data-selected]').forEach(el => el.removeAttribute('data-selected'))
@@ -349,6 +352,8 @@ export default {
   },
 
   showListboxAndFocus(optionToFocus) {
+    if (this.refs.button.disabled) return
+
     // Wrapper pattern: Show wrapper first (display:block) so Floating UI can measure it,
     // then position it, then trigger inner listbox transition. This prevents the listbox
     // from briefly appearing at wrong position before jumping to correct position.

demo/lib/demo_web/components/code_example.ex

@@ -12,7 +12,8 @@ defmodule DemoWeb.CodeExample do
     DemoWeb.DemoLive.AsyncModalDemo,
     DemoWeb.DemoLive.FormModalDemo,
     DemoWeb.DemoLive.AsyncComboboxDemo,
-    DemoWeb.DemoLive.ListboxFormDemo
+    DemoWeb.DemoLive.ListboxFormDemo,
+    DemoWeb.DemoLive.DisabledListboxDemo
   ]
 
   for module <- @live_component_modules, do: Code.ensure_compiled(module)

demo/lib/demo_web/live/demo_live/disabled_listbox_demo.ex

@@ -0,0 +1,98 @@
+defmodule DemoWeb.DemoLive.DisabledListboxDemo do
+  @moduledoc false
+  use DemoWeb, :live_component
+  import Prima.Listbox
+
+  @impl true
+  def mount(socket) do
+    {:ok, assign(socket, disabled?: true, plan: nil, submitted: nil)}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <form phx-change="plan_changed" phx-submit="submit" phx-target={@myself}>
+      <div class="flex items-center gap-4">
+        <.listbox id="disabled-listbox-example" name="plan" value={@plan} disabled={@disabled?}>
+          <.listbox_trigger
+            id="disabled-listbox-example-trigger"
+            class="w-56 inline-flex justify-between items-center rounded-lg bg-white border border-gray-300 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 in-data-disabled:opacity-50 in-data-disabled:cursor-not-allowed in-data-disabled:hover:bg-white"
+          >
+            <.listbox_value>{@plan || "Select a plan..."}</.listbox_value>
+            <svg
+              class="h-5 w-5 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </.listbox_trigger>
+
+          <.listbox_options
+            id="disabled-listbox-example-options"
+            class="py-1 rounded-md bg-white shadow-xs ring-1 ring-gray-300 focus:outline-none"
+          >
+            <.listbox_option
+              id="disabled-listbox-example-option-basic"
+              value="Basic"
+              class="text-gray-700 data-focus:bg-gray-100 data-focus:text-gray-900 block w-full px-4 py-2 text-sm text-left"
+            >
+              Basic
+            </.listbox_option>
+            <.listbox_option
+              id="disabled-listbox-example-option-pro"
+              value="Pro"
+              class="text-gray-700 data-focus:bg-gray-100 data-focus:text-gray-900 block w-full px-4 py-2 text-sm text-left"
+            >
+              Pro
+            </.listbox_option>
+          </.listbox_options>
+        </.listbox>
+
+        <button
+          id="disabled-listbox-example-toggle"
+          type="button"
+          phx-click="toggle_disabled"
+          phx-target={@myself}
+          class="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
+          {if @disabled?, do: "Enable", else: "Disable"}
+        </button>
+
+        <button
+          id="disabled-listbox-example-submit"
+          type="submit"
+          class="rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white hover:bg-gray-700"
+        >
+          Submit
+        </button>
+      </div>
+
+      <p class="mt-4 text-sm text-gray-600">
+        Submitted params:
+        <span id="disabled-listbox-example-submitted" class="font-mono text-gray-900">
+          {if @submitted, do: inspect(@submitted), else: "not submitted yet"}
+        </span>
+      </p>
+    </form>
+    """
+  end
+
+  @impl true
+  def handle_event("plan_changed", %{"plan" => plan}, socket) do
+    {:noreply, assign(socket, plan: plan)}
+  end
+
+  def handle_event("toggle_disabled", _params, socket) do
+    {:noreply, update(socket, :disabled?, &(!&1))}
+  end
+
+  def handle_event("submit", params, socket) do
+    {:noreply, assign(socket, submitted: params)}
+  end
+end

demo/lib/demo_web/live/demo_live/listbox_page.html.heex

@@ -76,6 +76,38 @@
     <.code_example file="listbox/disabled.html.heex" id="disabled-listbox-demo" />
   </div>
 
+  <p>
+    Disabled items use <code>aria-disabled="true"</code>
+    and <code>data-disabled="true"</code>
+    attributes for accessibility and styling. Use the <code>data-disabled:</code>
+    variant to style disabled items differently, such as reducing opacity or changing text color.
+  </p>
+
+  <h2>Disabled Listbox</h2>
+  <p>
+    Disable the entire listbox with <code>disabled={true}</code>
+    on <code>.listbox</code>. The hidden input is disabled in the initial HTML,
+    excluding its value from form submission. When the JavaScript hook mounts, it
+    disables the trigger button, preventing interaction and removing it from the tab
+    order. LiveView updates keep the state synchronized and close an open listbox
+    when it becomes disabled. Re-enabling the field preserves its selected value.
+  </p>
+
+  <div class="not-prose">
+    <.code_example
+      file="listbox/disabled_listbox_demo.ex"
+      module={DemoWeb.DemoLive.DisabledListboxDemo}
+      id="disabled-listbox-code-example"
+    />
+  </div>
+
+  <p>
+    To style the disabled state, use the <code>in-data-disabled:</code> variant on the
+    trigger button. The regular <code>data-disabled:</code> does not work because Prima
+    is unable to copy the <code>data-disabled="true"</code> attribute over to the
+    trigger button in the server-rendered HTML.
+  </p>
+
   <h2>Keyboard Interaction</h2>
   <p>
     The listbox provides keyboard navigation that follows standard ARIA patterns.

demo/lib/demo_web/live/fixtures_live.ex

@@ -19,6 +19,7 @@ defmodule DemoWeb.FixturesLive do
       |> assign(async_modal_open?: false)
       |> assign(selected_fruit: nil)
       |> assign(form_change_count: 0)
+      |> assign(listbox_disabled?: false, submitted_fruit: "not submitted")
       |> assign(trigger_label: "Open Dropdown")
       |> assign(modal_title: "Good news")
       |> stream_configure(:suggestions, dom_id: &"suggestions-#{&1}")
@@ -73,6 +74,16 @@ defmodule DemoWeb.FixturesLive do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("toggle-listbox-disabled", _params, socket) do
+    {:noreply, update(socket, :listbox_disabled?, &(!&1))}
+  end
+
+  @impl true
+  def handle_event("listbox_form_submitted", params, socket) do
+    {:noreply, assign(socket, submitted_fruit: Map.get(params, "fruit", "omitted"))}
+  end
+
   @impl true
   def handle_event("update-dropdown-trigger", _params, socket) do
     {:noreply, assign(socket, trigger_label: "Updated Trigger")}

demo/lib/demo_web/live/fixtures_live/listbox_fixture.html.heex

@@ -38,4 +38,21 @@
   <div id="outside-area" style="height: 50px; width: 100%;">
     <!-- Invisible area for click-outside testing -->
   </div>
+
+  <button id="before-disabled-listbox" type="button">Before disabled listbox</button>
+  <.listbox id="disabled-listbox" name="disabled_fruit_choice" disabled={true}>
+    <.listbox_trigger id="disabled-listbox-trigger">
+      <.listbox_value>Select a fruit...</.listbox_value>
+    </.listbox_trigger>
+
+    <.listbox_options id="disabled-listbox-options">
+      <.listbox_option id="disabled-listbox-option-apple" value="apple" display="Apple">
+        Apple
+      </.listbox_option>
+      <.listbox_option id="disabled-listbox-option-banana" value="banana" display="Banana">
+        Banana
+      </.listbox_option>
+    </.listbox_options>
+  </.listbox>
+  <button id="after-disabled-listbox" type="button">After disabled listbox</button>
 </div>

demo/lib/demo_web/live/fixtures_live/listbox_form_fixture.html.heex

@@ -1,5 +1,5 @@
-<form phx-change="form_changed">
-  <.listbox id="listbox-form" name="fruit" value={@selected_fruit}>
+<form id="listbox-test-form" phx-change="form_changed" phx-submit="listbox_form_submitted">
+  <.listbox id="listbox-form" name="fruit" value={@selected_fruit} disabled={@listbox_disabled?}>
     <.listbox_trigger
       id="listbox-form-trigger"
       class="w-64 inline-flex justify-between items-center rounded-lg bg-white border border-gray-300 px-3 py-2 text-sm text-gray-700"
@@ -26,4 +26,13 @@
   <div id="listbox-form-change-count" data-testid="change-count">
     Form changes: {@form_change_count}
   </div>
+  <button id="submit-listbox-form" type="submit">Submit</button>
+  <div id="listbox-submission">Submitted: {@submitted_fruit}</div>
 </form>
+<button
+  id="toggle-listbox-disabled"
+  type="button"
+  phx-click={Phoenix.LiveView.JS.push("toggle-listbox-disabled")}
+>
+  Toggle disabled
+</button>