Shadix.Components.Select (shadix v0.0.1)

Copy Markdown View Source

A field-aware select (listbox) built on client-side JS commands, Floating UI, and the ShadixSelect hook.

Unlike a native <select>, this reconstructs the shadcn look as a trigger button plus a Floating-UI-positioned popup <div role="listbox">. It is field-aware via Shadix.Form: it derives its name/value from a Phoenix.HTML.FormField and carries the selected value in a hidden <input> so it submits with the surrounding form.

The trigger toggles the content with toggle_listbox/1; the ShadixSelect hook (assets/ts/select.ts) watches the content's visibility via a MutationObserver, positions it under the trigger with @floating-ui/dom, handles keyboard navigation (arrows/Home/End/type-ahead/Enter/Escape), and on select writes the chosen value into the hidden input (dispatching an input event), updates the trigger label, marks aria-selected, then closes and refocuses the trigger. It initializes the selection from the field value.

Trigger and content ids derive from the required :id so aria-controls, data-trigger, and the JS targets line up stably.

Summary

Functions

hide_listbox(id)

Returns the Phoenix.LiveView.JS command that closes the listbox with id.

select(assigns)

Renders a field-aware select.

select_item(assigns)

A selectable option within a select.

toggle_listbox(id)

Returns the Phoenix.LiveView.JS command that toggles the listbox with id.

Functions

hide_listbox(id)

Returns the Phoenix.LiveView.JS command that closes the listbox with id.

Used by the hook's data-on-close (Escape / outside click) and after a selection.

select(assigns)

Renders a field-aware select.

The required :field supplies the hidden input's name and the initial value. The required :id derives the trigger/content ids. Pass select_item/1 children in the default slot.

Attributes

  • id (:string) (required)
  • field (Phoenix.HTML.FormField) (required)
  • placeholder (:string) - Defaults to "Select…".
  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)

select_item(assigns)

A selectable option within a select.

:value is the value submitted with the form when chosen; the inner block is the visible label. The ShadixSelect hook selects it on click/Enter.

Attributes

  • value (:string) (required)
  • disabled (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

toggle_listbox(id)

Returns the Phoenix.LiveView.JS command that toggles the listbox with id.

Reveals/hides the content panel with enter/leave transitions; the ShadixSelect hook reacts to the visibility change to position the listbox and wire up keyboard/outside-click handling.