Is it possible to keep a Menu open when clicking outside? #28183
-
I am using
I also tried using the Dialog of type non-modal but it is always centered on the screen. I would like to be displayed with a reference to its trigger point. I looked on the docs but there not seems to be a relevant prop for what I am looking for. Any recommendations are welcome. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
TL;DR make import {
Button,
Menu,
MenuTrigger,
MenuList,
MenuItem,
MenuPopover,
MenuProps
} from "@fluentui/react-components";
import * as React from "react";
export const ControllingOpenAndClose = () => {
const [open, setOpen] = React.useState(false);
const onOpenChange: MenuProps["onOpenChange"] = (e, data) => {
if (data.type === "clickOutside") {
return;
}
setOpen(data.open);
};
return (
<div>
<Menu open={open} onOpenChange={onOpenChange}>
<MenuTrigger disableButtonEnhancement>
<Button>Toggle menu</Button>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>New </MenuItem>
<MenuItem>New Window</MenuItem>
<MenuItem disabled>Open File</MenuItem>
<MenuItem>Open Folder</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</div>
);
}; https://codesandbox.io/s/elastic-hill-xvj7st?file=/example.tsx |
Beta Was this translation helpful? Give feedback.
TL;DR make
Menu
controlled and check event's data: