Skip to content

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

Description

@PlusA2M

Version: 2.19.0 (also present on main)

Describe the bug

In any media-type field, clicking Select Media opens the picker fine, but
typing in its search box (a) doesn't filter the results, and (b) renders a whole
new search-box-plus-grid panel inside the grid — nesting one level deeper
with every keystroke.

Root cause

Two defects in GET /admin/media/selector (packages/core/src/routes/admin-media.ts):

  1. The search input has an id but no name, yet relies on
    hx-include="[name='search']" — so the typed term is never sent:
    <input type="search" id="media-selector-search" 
           hx-target="#media-selector-grid"
           hx-include="[name='search']">   <!-- nothing on the page is named "search" -->
  2. The endpoint always returns the full panel (search box +
    #media-selector-grid). Since the input's hx-target is the inner grid,
    htmx swaps that entire panel into the grid → a nested panel per keystroke.

To reproduce

  1. Edit any content type that has a media field.
  2. Click Select Media.
  3. Type in the picker's search box.
  4. Results don't filter; a nested search-box+grid appears inside the grid and
    deepens with each keystroke.

Expected

Typing filters the grid in place; the search box stays put (single, not nested);
selecting a file still fills the field.

Proposed fix

  1. Add name="search" to the input so hx-include sends the term.
  2. Return a grid-only fragment for the HTMX search request (detected via the
    HX-Target: media-selector-grid header) and the full panel only on the
    initial modal load.

I have a working fix with a regression test and can open a PR.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions