Skip to content

fix(media): named search input + grid-only fragment for media selector#893

Open
PlusA2M wants to merge 1 commit into
SonicJs-Org:mainfrom
PlusA2M:fix/media-selector-search
Open

fix(media): named search input + grid-only fragment for media selector#893
PlusA2M wants to merge 1 commit into
SonicJs-Org:mainfrom
PlusA2M:fix/media-selector-search

Conversation

@PlusA2M

@PlusA2M PlusA2M commented Jun 13, 2026

Copy link
Copy Markdown

Description

The "Select Media" picker's search was broken two ways: the input had no name
(so hx-include="[name='search']" sent nothing), and the endpoint always returned
the full panel into the inner grid (so each keystroke nested a fresh search box +
grid). This makes search filter in place without nesting.

Fixes #890

Changes

  • admin-media.ts GET /selector: add name="search" to the input so the term
    is actually sent.
  • Return a grid-only fragment when the request targets the grid
    (HX-Target: media-selector-grid), and the full panel only on the initial
    modal load — so keystrokes update the grid in place instead of nesting a panel.
  • Build the card markup once and reuse it for both responses; move the empty state
    inside the grid (col-span-full).
  • Also re-query on the search input's native clear (hx-trigger … , search).
  • Add a regression test: initial load returns a named input + grid; an HTMX search
    returns only cards (no <input>, no grid container) with the term bound; empty
    search renders the in-grid empty state.

Testing

Unit Tests

  • Added/updated unit tests (admin-media-selector.test.ts)
  • All unit tests passing (npm test — full suite green)

E2E Tests

  • Added/updated E2E tests
  • All E2E tests passing

Checklist

  • Code follows project conventions
  • Tests added/updated and passing
  • Type checking passes
  • No console errors or warnings
  • Documentation updated (if needed) — n/a

GET /admin/media/selector had two defects: the search input had an `id` but no
`name`, so `hx-include="[name='search']"` never sent the term; and the endpoint
always returned the full panel (search box + grid), while the input targets the
inner `#media-selector-grid` — so each keystroke swapped a whole new panel into
the grid, nesting one per keystroke.

Add `name="search"` to the input and return a grid-only fragment for the HTMX
search request (HX-Target: media-selector-grid), keeping the full panel for the
initial modal load. Also re-query on the search input's native clear button.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: PlusA2M <plusa2m@gmail.com>
@PlusA2M PlusA2M requested a review from lane711 as a code owner June 13, 2026 16:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"Select Media" picker: search nests a new panel per keystroke and does not filter

1 participant