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

Hang a searchable choice's list as wide as its field

Browse Source 
The searchable choice put its `anchor-name` on a `<div>` around its
field, and menu.css sizes the popover list with
`anchor-size(width)`. The wrapper fills its container, but from
`medium` the field inside it stops at 40rem, so in a wider pane the
list ran past the field's end across the whole container: 1168px under
a 640px field. Found while giving the choice `full`, which only hid it.

The field itself carries the anchor now and the wrapper is gone, so the
list is as wide as the field, bounded or `full`, and still hangs under
the field's supporting text as before.

A browser test opens a bounded and a `full` searchable choice in a
1200px column and compares each list's width and start with its field;
it fails without the change in Chrome, Firefox and Safari.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 07:06:25 +02:00
co-authored by Claude Opus 5
parent 7aa6dc7d33
commit 16c52d46e9
3 changed files with 80 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/choices.blade.php
+35 -36
View File
@@ -11,7 +11,8 @@
and End go to the ends of the open list (with it closed they are the field's own and move the
caret), Enter chooses, Escape puts the field back — WAI-ARIA's combobox keyboard, since M3
has no combobox. One value only. The list is a popover in the top
layer, placed by CSS anchor positioning, so a card's clipping never cuts it off. `icon`,
layer, placed by CSS anchor positioning on the field itself, so a card's clipping never cuts
it off and it is as wide as the field, 40rem bound and all. `icon`,
`variant` and `placeholder` are the field's, and `full` takes the 40rem bound off the field
as it does off every field. Chips have no such bound, so they take `full` and change nothing.
@@ -135,42 +136,40 @@
}"
@if ($model === null) x-modelable="value" @endif
>
<div style="anchor-name: {{ $anchor }}">
<x-livewire-material::field :$id :$label :$hint :$messages :$icon :$variant :$full>
<input
id="{{ $id }}"
type="text"
role="combobox"
autocomplete="off"
aria-autocomplete="list"
aria-controls="{{ $id }}-list"
aria-expanded="false"
x-bind:aria-expanded="open.toString()"
x-bind:aria-activedescendant="open && filtered[active] ? '{{ $id }}-option-' + active : null"
@if ($messages !== []) aria-invalid="true" @endif
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
placeholder="{{ filled($placeholder) ? $placeholder : ' ' }}"
data-md-field-control
x-model="query"
x-on:focus="show(); $nextTick(() => $el.select())"
x-on:pointerdown="selecting = document.activeElement !== $el"
x-on:click="if (selecting) { $el.select(); selecting = false; } if (! open) show();"
x-on:input="open = true; active = 0"
x-on:keydown.arrow-down.prevent="move(1)"
x-on:keydown.arrow-up.prevent="move(-1)"
x-on:keydown.home="jump($event, false)"
x-on:keydown.end="jump($event, true)"
x-on:keydown.enter.prevent="choose(filtered[active])"
x-on:keydown.escape="if (open) $event.preventDefault(); close()"
x-on:keydown.tab="close()"
x-on:blur="close()"
/>
<x-livewire-material::field :$id :$label :$hint :$messages :$icon :$variant :$full style="anchor-name: {{ $anchor }}">
<input
id="{{ $id }}"
type="text"
role="combobox"
autocomplete="off"
aria-autocomplete="list"
aria-controls="{{ $id }}-list"
aria-expanded="false"
x-bind:aria-expanded="open.toString()"
x-bind:aria-activedescendant="open && filtered[active] ? '{{ $id }}-option-' + active : null"
@if ($messages !== []) aria-invalid="true" @endif
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
placeholder="{{ filled($placeholder) ? $placeholder : ' ' }}"
data-md-field-control
x-model="query"
x-on:focus="show(); $nextTick(() => $el.select())"
x-on:pointerdown="selecting = document.activeElement !== $el"
x-on:click="if (selecting) { $el.select(); selecting = false; } if (! open) show();"
x-on:input="open = true; active = 0"
x-on:keydown.arrow-down.prevent="move(1)"
x-on:keydown.arrow-up.prevent="move(-1)"
x-on:keydown.home="jump($event, false)"
x-on:keydown.end="jump($event, true)"
x-on:keydown.enter.prevent="choose(filtered[active])"
x-on:keydown.escape="if (open) $event.preventDefault(); close()"
x-on:keydown.tab="close()"
x-on:blur="close()"
/>
<x-slot:trailing>
<x-livewire-material::icon name="arrow_drop_down" data-md-field-trailing data-md-field-arrow />
</x-slot:trailing>
</x-livewire-material::field>
</div>
<x-slot:trailing>
<x-livewire-material::icon name="arrow_drop_down" data-md-field-trailing data-md-field-arrow />
</x-slot:trailing>
</x-livewire-material::field>
<ul
id="{{ $id }}-list"