Skip to content

Add selectedcontent button to select inputs#2061

Merged
Flo0807 merged 1 commit into
developfrom
feature/customizable-select-button
Jul 6, 2026
Merged

Add selectedcontent button to select inputs#2061
Flo0807 merged 1 commit into
developfrom
feature/customizable-select-button

Conversation

@Flo0807

@Flo0807 Flo0807 commented Jul 6, 2026

Copy link
Copy Markdown
Collaborator

What

Adds a customizable-select trigger to every native <select> in Backpex:

<button>
  <selectedcontent></selectedcontent>
</button>

inserted as the first child of each <select>. Affected selects:

  • Backpex.HTML.Form.input/1 (type="select") — the shared select input used by the select and belongs_to fields
  • Backpex.Filters.Select.render_form/1 — the select filter
  • Backpex.HTML.Resource.select_per_page/1 — the "items per page" picker

Why

Backpex already ships ::picker(select) utility classes (e.g. in the error styling of the select input), which only take effect under appearance: base-select. This change completes that direction: with the customizable-select rendering, <selectedcontent> mirrors the currently selected <option>'s content into the styleable trigger <button>, while the element stays a real native <select> — keyboard support, form submission and accessibility semantics are unchanged.

Browsers without customizable-select support simply ignore the <button> and fall back to the standard native <select>, so this is a progressive enhancement.

Notes for review

  • The form select supports multiple={@multiple}. The <button>/<selectedcontent> pattern is meaningful for single-select comboboxes only; for multiple selects it is inert. I added it unconditionally per the change's intent — happy to guard it with :if={!@multiple} if preferred.

Verification (local)

  • mix compile --warnings-as-errors --force ✅ (HEEx accepts <button> inside <select>)
  • mix format --check-formatted
  • mix test ✅ 166 tests, 95 doctests, 0 failures
  • mix credo ✅ no issues
  • mix docs --warnings-as-errors

Insert a <button><selectedcontent></selectedcontent></button> as the
first child of every native <select> (form input, select filter and
per-page picker). This opts the selects into the customizable-select
rendering already hinted at by the existing ::picker(select) utility
classes, so the trigger mirrors the selected option's content while
keeping the native control and its accessibility intact.

Browsers without customizable-select support ignore the button and fall
back to the standard <select>.
@Flo0807 Flo0807 self-assigned this Jul 6, 2026
@Flo0807 Flo0807 added the enhancement Changes that are not breaking label Jul 6, 2026
@Flo0807
Flo0807 added this pull request to the merge queue Jul 6, 2026
Merged via the queue into develop with commit 7eb6e17 Jul 6, 2026
8 checks passed
@Flo0807
Flo0807 deleted the feature/customizable-select-button branch July 6, 2026 06:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Changes that are not breaking

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant