Keep the full-screen range picker's months where they were as it grows

When the full-screen range picker adds months above the ones on screen,
extendMonths() puts the scroll back by however much the list grew. An
engine with scroll anchoring moved it back as well, so a reader paging up
landed half a year on, and a press meant for one day chose another. The
calendar now opts out of scroll anchoring (`overflow-anchor: none`) and
the picker's own correction is the only one, in every engine alike. A
test holds what sits under a fixed point of the list while it grows.

The browser plugin retries an action the way it retries an assertion:
when the page takes longer than a second to handle a press, it presses
again. On a loaded runner the full-screen picker, which re-renders every
day of every month it holds, took that long — so its toggle was pressed
a second time under the picker it had just opened, and never landed, and
a day pressed twice became the range's end as well as its start.
`pressOnce()` sends a press that must not be repeated exactly once, with
Playwright's own wait for the element; the picker's toggle, its paging
keys, its days and its Save go through it, and so do the menu triggers
that toggle.

Browser 300 passed on Chrome, Firefox and WebKit on macOS, and the date
picker and menu tests 61 passed on Linux Firefox and WebKitGTK held to
two busy cores. Feature 1159 passed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

tests/Browser/DatepickerTest.php

@@ -537,19 +537,20 @@ it('opens the range picker full screen below 600px and grows its month list both
 
     $page = dateProbe()
         ->resize(390, 800)
-        // Explicit, not implicit: the resize's own reflow can still be under way when the click
-        // that follows fires, and the press it costs the runner is the one press this test cannot
-        // afford to lose. The browser plugin gives each attempt a second and then presses again,
-        // and once the full-screen picker is up it covers the toggle it came from — the month
-        // grid is what the browser finds there — so no later attempt can ever land. That is the
-        // 90 seconds (45s of attempts, then one last one with the whole budget) this timed out in.
+        // Explicit, not implicit: the resize's own reflow can still be under way when the press
+        // that follows lands.
         ->assertScript('window.innerWidth === 390')
         ->assertScript(settled('document.documentElement', subtree: true));
 
     expect($page->script(hitTarget('[aria-controls=\"trip-field-picker\"][data-md-datepicker-toggle]')))->toBe('the target');
 
-    $page->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
-        ->assertScript("{$picker}.dataset.mdPresentation === 'full'")
+    // Every press into the full-screen picker goes through pressOnce(): it re-renders every day of
+    // every month it holds on each one, which on a loaded runner takes longer than the plugin's
+    // second for an attempt — and a retried press is a second press. The first one here opens the
+    // picker over its own toggle, so a second could never land.
+    pressOnce($page)->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]');
+
+    $page->assertScript("{$picker}.dataset.mdPresentation === 'full'")
         ->assertScript("{$picker}.matches(':modal')")
         ->assertScript("document.querySelector('#trip-field-picker [data-md-datepicker-app-bar]').offsetHeight > 0")
         // M3's 14-element anatomy: a close (×) icon button and Save in the app bar, not Cancel/OK.
@@ -562,7 +563,7 @@ it('opens the range picker full screen below 600px and grows its month list both
 
     // Paging seven months forward crosses the window's forward edge, growing it to cover the month walked to.
     foreach (range(1, 7) as $ignored) {
-        $page->keys(':focus', 'PageDown');
+        pressOnce($page)->keys(':focus', 'PageDown');
     }
 
     $page->assertScript("{$scope}.monthsTo > '2027-03-01'")
@@ -571,7 +572,7 @@ it('opens the range picker full screen below 600px and grows its month list both
 
     // Paging fourteen months back does the same the other way, past the original start.
     foreach (range(1, 14) as $ignored) {
-        $page->keys(':focus', 'PageUp');
+        pressOnce($page)->keys(':focus', 'PageUp');
     }
 
     $page->assertScript("{$scope}.monthsFrom < '2026-03-01'")
@@ -582,18 +583,67 @@ it('opens the range picker full screen below 600px and grows its month list both
     // script() returns the script's result, not the page, so the chain starts again after it.
     $page->script("{$scope}.moveTo('2026-09-13', false)");
 
-    $page->click(day('trip-field', '2026-09-20'))
-        ->click(day('trip-field', '2026-09-24'))
-        // What Save is about to commit, read from the picker before it is pressed: a press that
-        // landed on another day — the month list grows both ways as it scrolls, so a cell can move
-        // under one — otherwise shows up only as the value never reaching the server, which says
-        // nothing about which half went wrong.
-        ->assertScript("JSON.stringify({$scope}.draft) === '{\"start\":\"2026-09-20\",\"end\":\"2026-09-24\"}'")
-        ->click('#trip-field-picker [data-md-datepicker-save]')
-        ->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
+    pressOnce($page)->click(day('trip-field', '2026-09-20'))
+        ->click(day('trip-field', '2026-09-24'));
+
+    // What Save is about to commit, read from the picker before it is pressed: a day pressed twice
+    // makes it the range's end as well as its start, and the next press then begins a new range —
+    // which otherwise shows up only as the value never reaching the server.
+    $page->assertScript("JSON.stringify({$scope}.draft) === '{\"start\":\"2026-09-20\",\"end\":\"2026-09-24\"}'");
+
+    pressOnce($page)->click('#trip-field-picker [data-md-datepicker-save]');
+
+    $page->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
         ->assertScript("! {$picker}.open");
 });
 
+it('keeps the months in view where they were when the full-screen range picker adds months above them', function () {
+    $picker = "document.querySelector('#trip-field-picker')";
+
+    $page = dateProbe()
+        ->resize(390, 800)
+        // Settled before the press, as the test above says at length.
+        ->assertScript('window.innerWidth === 390')
+        ->assertScript(settled('document.documentElement', subtree: true));
+
+    pressOnce($page)->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]');
+
+    $page->assertScript("{$picker}.dataset.mdPresentation === 'full'")
+        ->assertScript(focusedDay('2026-09-13'));
+
+    // Scrolled close to the top, the list grows by six months above what is on screen. What sits
+    // under a fixed point of the list stays what sat there, rather than the list being put back
+    // twice — once by the picker and once more by the browser's own scroll anchoring — and
+    // landing half a year on.
+    $result = $page->script(onceInPage(<<<'JS'
+        (async () => {
+            const list = document.querySelector('#trip-field-picker [data-md-datepicker-calendar]')
+            const scope = Alpine.$data(document.querySelector('[data-md-datepicker]:has(#trip-field)'))
+            const frame = () => new Promise((resolve) => requestAnimationFrame(resolve))
+            const under = () => {
+                const box = list.getBoundingClientRect()
+                const element = document.elementFromPoint(box.left + box.width / 2, box.top + 150)
+
+                return element?.closest('[data-md-value]')?.dataset.mdValue ?? element?.textContent.trim() ?? null
+            }
+
+            const from = scope.monthsFrom
+            list.scrollTop = 300
+            const before = under()
+
+            for (let i = 0; i < 4; i++) {
+                await frame()
+            }
+
+            return { grew: scope.monthsFrom < from, before, after: under() }
+        })()
+        JS));
+
+    expect($result['grew'])->toBeTrue()
+        ->and($result['before'])->not->toBeNull()
+        ->and($result['after'])->toBe($result['before']);
+});
+
 it('closes the full-screen range picker from its app bar close button without keeping the draft', function () {
     $picker = "document.querySelector('#trip-field-picker')";
 
@@ -605,10 +655,11 @@ it('closes the full-screen range picker from its app bar close button without ke
 
     expect($page->script(hitTarget('[aria-controls=\"trip-field-picker\"][data-md-datepicker-toggle]')))->toBe('the target');
 
-    $page->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
+    pressOnce($page)->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
         ->click(day('trip-field', '2026-09-20'))
-        ->click('#trip-field-picker [data-md-datepicker-close]')
-        ->assertScript("! {$picker}.open")
+        ->click('#trip-field-picker [data-md-datepicker-close]');
+
+    $page->assertScript("! {$picker}.open")
         ->assertSeeIn('#trip', '{"start":"2026-09-13","end":"2026-09-15"}');
 });