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
tests/Browser/PickingTest.php
+41
View File
@@ -133,6 +133,47 @@ it('opens a searchable choice\'s list above a container that clips', function ()
JS);
});
it('hangs a searchable choice\'s list under its field and as wide, bounded at 40rem or full', function () {
Route::middleware('web')->get('/wide-choices-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body style="background-color: var(--md-sys-color-surface);">
<div style="display: grid; width: 1200px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<x-choices id="bounded-zone" label="Time zone" searchable :options="[['id' => 'Europe/Berlin', 'name' => 'Berlin'], ['id' => 'Europe/Zurich', 'name' => 'Zurich']]" />
<x-choices id="full-zone" label="Time zone" searchable full :options="[['id' => 'Europe/Berlin', 'name' => 'Berlin'], ['id' => 'Europe/Zurich', 'name' => 'Zurich']]" />
<div style="height: 320px"></div>
</div>
@livewireScripts
</body>
</html>
BLADE));
// [the field's width, the list's width, the list's start against the field's].
$placed = fn (string $id): string => "(() => {
const field = document.querySelector('[data-md-field]:has(#{$id})').getBoundingClientRect();
const list = document.getElementById('{$id}-list').getBoundingClientRect();
return [Math.round(field.width), Math.round(list.width), Math.round(list.left - field.left)];
})()";
$page = visit('/wide-choices-probe')->resize(1280, 800)->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'");
$page->click('#bounded-zone')->assertScript("document.getElementById('bounded-zone-list').matches(':popover-open')");
expect($page->script($placed('bounded-zone')))->toBe([640, 640, 0]);
$page->keys('#bounded-zone', 'Escape')->assertScript("! document.getElementById('bounded-zone-list').matches(':popover-open')");
$page->click('#full-zone')->assertScript("document.getElementById('full-zone-list').matches(':popover-open')");
expect($page->script($placed('full-zone')))->toBe([1168, 1168, 0]);
});
it('opens the search view with the results Livewire renders for the query', function () {
$view = "document.querySelector('#find-view')";