Close a full-screen search back into its bar or icon, bar and view together
`fullScreen` followed `open`, so the moment a full-screen search closed, `data-md-full-screen` went with it: the fixed header bar went back to its resting pill — or to `display: none`, behind the search icon — and the view, still fading out under Alpine's hold, dropped to the docked layout for its exit. In every engine the bar vanished on the first frame while the view went on fading somewhere else. search.js: a close from full screen now `hold()`s the layout — `leaving` keeps `fullScreen`, and with it `data-md-full-screen`, the back arrow and the fixed bar, for the view's own closing duration, read from its computed style a frame on (zero under reduced motion); reopening lets a pending end go by. search.css fades the header bar out with the view on the view's spring and keeps the root above the page while it leaves, and the icon trigger's bar stays displayed until the layout settles. The focus trap now binds to `open && fullScreen`, so it still lets go at the close and its return of focus lands inside RETURN_GUARD_MS rather than reopening the view at the end of the exit. PickingTest samples both exits in the page — the icon trigger, and the bar trigger on a compact window — for a moment where the root is still full screen with a fixed bar and both bar and view part-way through their fade, then checks the settled layout and focus back on the icon or the field; both fail on the previous code in Chrome, Firefox and Safari. The tests wait for the entry's own transitions first: Firefox reads a transition's end value until its next refresh tick. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
9f46630352
commit
db6023bf80
@@ -114,7 +114,9 @@ it('draws the bar and the view from its stylesheet, at M3\'s widths', function (
|
||||
expect($css)->toContain('@layer material.components')
|
||||
->toMatch('/\\[data-md-search\\] \\{\\s*--search-height: 56px;[^}]*--search-open-width: 720px;/')
|
||||
->toContain('[data-md-search][data-md-full-screen] [data-md-search-view] {')
|
||||
->toContain("[data-md-search][data-md-trigger='icon']:not([data-md-open]) [data-md-search-bar] {")
|
||||
->toContain("[data-md-search][data-md-trigger='icon']:not([data-md-open], [data-md-full-screen]) [data-md-search-bar] {")
|
||||
// Leaving full screen, the header bar fades with the view instead of going on the first frame.
|
||||
->toContain('[data-md-search][data-md-full-screen]:not([data-md-open]) [data-md-search-bar] {')
|
||||
->not->toMatch('/\\d(?:\\.\\d+)?rem/')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/search.css';");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user