Skip to content

Is it possible to keep a Menu open when clicking outside? #28183

Answered by layershifter
kboul asked this question in Q&A
Discussion options

You must be logged in to vote

TL;DR make Menu controlled and check event's data:

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>

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@kboul
Comment options

Answer selected by layershifter
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants