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)
{
-
+
}
-
@@ -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;
}
}