diff --git a/resources/css/components/search.css b/resources/css/components/search.css index 51c8678d..56366c05 100644 --- a/resources/css/components/search.css +++ b/resources/css/components/search.css @@ -45,8 +45,10 @@ position: relative; } - /* Full screen, through its exit too: the fixed view and bar stay above the page while they leave. */ - [data-md-search]:is([data-md-open], [data-md-full-screen]) { + /* Above the page while open, and while the view leaves: full screen through `data-md-full-screen`, + docked through the `md-transition` class Alpine's `x-transition` carries for the length of the + view's exit, so later positioned content on the page never covers the fading view. */ + [data-md-search]:is([data-md-open], [data-md-full-screen], :has(> [data-md-search-view].md-transition)) { z-index: 50; } diff --git a/tests/Browser/PickingTest.php b/tests/Browser/PickingTest.php index 780ce7f5..1eec3edb 100644 --- a/tests/Browser/PickingTest.php +++ b/tests/Browser/PickingTest.php @@ -212,6 +212,19 @@ it('fades the docked search\'s scrim out on close, rather than making it vanish' $page->assertScript("getComputedStyle({$root}.querySelector('[data-md-search-scrim]')).display === 'none'"); }); +it('keeps the docked search above the page while its view closes', function () { + $view = "document.querySelector('#find-view')"; + + $page = pickProbe() + ->click('#find') + ->assertScript("getComputedStyle({$view}).display !== 'none' && getComputedStyle({$view}).opacity === '1'"); + + // The view caught part-way through its fade only counts while the root is still at z-index 50. + expect($page->script(searchCloseSample('[data-md-search-view]', "getComputedStyle(root).zIndex === '50' ? parseFloat(getComputedStyle(element).opacity) : 0")))->toBeTrue(); + + $page->assertScript("getComputedStyle({$view}).display === 'none' && getComputedStyle(document.querySelector('[data-md-search]:has(#find)')).zIndex !== '50'"); +}); + it('closes the docked search view back into its bar, rather than making it vanish', function () { $view = "document.querySelector('#find-view')";