noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filter a menu from a field at the top of it

Browse Source 
Plan step 22, actions.md § Missing (Menus as a filtering surface): M3's
menus page describes a menu that embeds a text field and filters its
options as you type, and nothing in the library did that.

`<x-menu filter>` renders the field, sticky above the list, and hides the
rows the query leaves out — client-side over the items already rendered,
so nothing is fetched and a `wire:click` stays where it was. The field
keeps the focus and the arrow keys move a highlight it names through
`aria-activedescendant`, the APG combobox keyboard `<x-choices
searchable>` already uses; Enter chooses the highlighted row, and a query
that leaves nothing says so. The list becomes a `role="menu"` inside the
popover, because a text field is not something a menu may contain.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:38:02 +02:00
co-authored by Claude Opus 5
parent 3f651c5c08
commit 88c46001fb
6 changed files with 268 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/menus.blade.php
+16
View File
@@ -91,6 +91,22 @@
<x-menu-item label="Delete" icon="delete" />
</x-menu>
BLADE,
'A menu that filters as you type' => <<<'BLADE'
<x-menu label="Assign to" filter="Find a person">
<x-slot:trigger>
<x-button label="Assign to" icon="person_add" variant="tonal" />
</x-slot:trigger>
<x-menu-item label="Ada Lovelace" icon="person" description="Engineering" />
<x-menu-item label="Grace Hopper" icon="person" description="Engineering" />
<x-menu-item label="Katherine Johnson" icon="person" description="Research" />
<x-menu-item label="Mary Jackson" icon="person" description="Research" />
<x-menu-item label="Radia Perlman" icon="person" description="Networks" />
<x-menu-item label="Barbara Liskov" icon="person" description="Networks" />
<x-menu-separator />
<x-menu-item label="Nobody, for now" icon="person_off" />
</x-menu>
BLADE,
'Icons in their own colour' => <<<'BLADE'
<x-menu label="New plan">
<x-slot:trigger>