From 63f2517f5b0e1fe809f2cbfa01921544c66da439 Mon Sep 17 00:00:00 2001 From: thepra Date: Tue, 6 Oct 2026 22:46:12 +0200 Subject: [PATCH] Dropdowns open as sheets on phones, come into view, and take no room closed A closed dropdown's content stayed displayed whenever it carried a display class (flex, grid), only invisible, so it still took room: the React picker past a card's right edge made the whole feed scroll sideways on a phone (294px at 360px). A closed one is now not displayed at all. DDropdown moves the focus into its content on opening, which also scrolls a menu cut off by the feed into view, and gives it back to its trigger after Escape or an outside tap. New SheetOnNarrow makes the content a sheet from the bottom of the screen below md, over a dimmed page, at most 80dvh tall. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw --- Components/Daisy/Actions/DDropdown.razor | 58 ++++++++++++++++++------ Styles/neo.css | 7 +-- 2 files changed, 49 insertions(+), 16 deletions(-) diff --git a/Components/Daisy/Actions/DDropdown.razor b/Components/Daisy/Actions/DDropdown.razor index 097e017..79b4b72 100644 --- a/Components/Daisy/Actions/DDropdown.razor +++ b/Components/Daisy/Actions/DDropdown.razor @@ -3,17 +3,21 @@ @* daisyUI Dropdown: https://daisyui.com/components/dropdown/ . The open state lives in C# (@bind-IsOpen): dropdown-open shows the content and dropdown-close keeps the focus-within rule from showing it while closed. While open, a transparent full-screen layer under the content closes it on an outside click; Escape closes it - too. With Hover the CSS hover rule opens it instead. *@ + too. With Hover the CSS hover rule opens it instead. Opening moves the focus into the content (Blazor's FocusAsync), + which also scrolls a menu cut off by its scroller into view; Escape or an outside click gives it back to the trigger. + SheetOnNarrow makes the content a sheet rising from the bottom of a phone's screen (below md), over a dimmed page. *@
-
@Trigger
@if (IsOpen) { - + } -
+
@ChildContent
@@ -31,6 +35,17 @@ [Parameter] public bool CloseOnContentClick { get; set; } [Parameter] public string TriggerClass { get; set; } [Parameter] public string ContentClass { get; set; } + /// Below md, the content is a sheet at the bottom of the screen instead of hanging from the trigger. + [Parameter] public bool SheetOnNarrow { get; set; } + + const string Sheet = "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:m-0 max-md:w-full max-md:max-h-[80dvh] " + + "max-md:overflow-y-auto max-md:overscroll-contain max-md:rounded-b-none max-md:translate-none max-md:scale-100 " + + "max-md:p-3 max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))]"; + + ElementReference trigger; + ElementReference content; + bool focusContent; + bool focusTrigger; string CssClass => Cx("dropdown", PlacementClass, AlignClass, IsOpen ? "dropdown-open" : Hover ? "dropdown-hover" : "dropdown-close", Class); @@ -50,16 +65,33 @@ _ => null }; - Task Toggle() => SetOpen(!IsOpen); - - Task Close() => SetOpen(false); - - Task OnContentClick() => CloseOnContentClick ? SetOpen(false) : Task.CompletedTask; - - Task OnKeyDown(KeyboardEventArgs e) => e.Key == "Escape" && IsOpen ? SetOpen(false) : Task.CompletedTask; - - async Task SetOpen(bool isOpen) + protected override async Task OnAfterRenderAsync(bool firstRender) { + if (focusContent) + { + focusContent = false; + await content.FocusAsync(); + } + if (focusTrigger) + { + focusTrigger = false; + await trigger.FocusAsync(); + } + } + + Task Toggle() => SetOpen(!IsOpen, IsOpen); + + Task Close() => SetOpen(false, true); + + // (a menu item may open a dialog, which takes the focus itself: the trigger doesn't take it back) + Task OnContentClick() => CloseOnContentClick ? SetOpen(false, false) : Task.CompletedTask; + + Task OnKeyDown(KeyboardEventArgs e) => e.Key == "Escape" && IsOpen ? SetOpen(false, true) : Task.CompletedTask; + + async Task SetOpen(bool isOpen, bool giveFocusBack) + { + focusContent = isOpen && !IsOpen; + focusTrigger = !isOpen && IsOpen && giveFocusBack; IsOpen = isOpen; await IsOpenChanged.InvokeAsync(isOpen); } diff --git a/Styles/neo.css b/Styles/neo.css index 7794668..10ccdcd 100644 --- a/Styles/neo.css +++ b/Styles/neo.css @@ -278,10 +278,11 @@ background-color: var(--color-base-100); box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark); - /* A display utility on the content (flex, grid) beats daisyUI's display:none on a closed dropdown, which then stays - invisible (opacity 0) but still in the way of the pointer, over whatever it covers: hide it from the pointer too. */ + /* A display utility on the content (flex, grid) beats daisyUI's display:none on a closed dropdown, which then stayed + invisible (opacity 0) but in the way of the pointer, and still took room: a closed menu past a card's edge made + the feed scroll sideways on a phone. A closed one is not displayed at all. */ :where(.dropdown.dropdown-close, .dropdown:not(.dropdown-open, .dropdown-hover:hover, :focus-within)) & { - visibility: hidden; + display: none !important; } }