fix(ui): keep dropdown menus open on window blur

This commit is contained in:
Mauricio Siu
2026-08-02 14:29:57 -06:00
parent 2be9e1e3df
commit 081cf3fb80
+20 -4
View File
@@ -1,21 +1,37 @@
import { CheckIcon, ChevronRightIcon } from "lucide-react";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import type * as React from "react";
import * as React from "react";
import { markNestedPopupClosed } from "@/components/ui/nested-popup-context";
import { cn } from "@/lib/utils";
function DropdownMenu({
open,
defaultOpen,
onOpenChange,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
defaultOpen ?? false,
);
const isControlled = open !== undefined;
const isOpen = isControlled ? open : uncontrolledOpen;
return (
<DropdownMenuPrimitive.Root
data-slot="dropdown-menu"
onOpenChange={(open) => {
if (!open) {
open={isOpen}
onOpenChange={(nextOpen) => {
// Radix closes menus on window blur, unmounting any dialog rendered inside
if (!nextOpen && !document.hasFocus()) {
return;
}
if (!isControlled) {
setUncontrolledOpen(nextOpen);
}
if (!nextOpen) {
markNestedPopupClosed();
}
onOpenChange?.(open);
onOpenChange?.(nextOpen);
}}
{...props}
/>