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; } }