[React][Menu] The menu unexpectedly closes after opening when toggling between two menus with at least one controlled menu

[100terres]

🐛 Bug report

The menu unexpectedly closes after opening when toggling between two menus with at least one controlled menu. I'll let the videos below speak for themselves.

💥 Steps to reproduce

1. Build a controlled Menu component.
2. Render the two on the same page.
3. Quickly open the menu one after the other.
4. After a few clicks, one of the menus that was just opened will accidentally close.

See reproduction and video below for more details.

💻 Link to reproduction

In the project, there's a const called ENABLE_HACKS that you can set to true or false. The const will activate some hacks that fix this specific problem.

StackBlitz reproduction: https://stackblitz.com/edit/zag-js-menu-interaction-problem?file=src%2FApp.tsx,src%2FMenu.tsx

🧐 Expected behavior

The menu shouldn't close after opening.

🧭 Possible Solution

I'm not exactly sure. I went through Zag's code base and was able to prevent the issue from happening by overriding the focusTrigger actions of the menu machine and by preventing the default event on specific dismiss requests coming from the layer.

Please let me know if there's anything I can do to help.

🌍 System information

Software	Version(s)
Zag Version	1.27.1
Browser	Chrome 142.0.7444.60
Operating System	MacOS 15.7.1

📝 Additional information

The problem

Screen.Recording.2025-11-06.at.16.37.33.mov

With the hacks (no more problems)

Screen.Recording.2025-11-06.at.16.38.32.mov

[segunadebayo]

Moving this to a discussion as I can't reproduce this.

CleanShot.2025-11-07.at.14.42.26.mp4

import * as menu from '@zag-js/menu';
import { normalizeProps, useMachine } from '@zag-js/react';
import { useId } from 'react';

interface MenuProps {
  open?: boolean;
  setOpen?: (newOpen: boolean) => void;
}

export default function Menu(props: MenuProps) {
  const { open, setOpen } = props;
  const id = useId();
  const service = useMachine(menu.machine, {
    id,
    open,
    onOpenChange: (details) => {
      setOpen?.(details.open);
    },
  });

  const api = menu.connect(service, normalizeProps);

  return (
    <div>
      <button {...api.getTriggerProps()}>
        Actions <span {...api.getIndicatorProps()}>▾</span>
      </button>
      <div {...api.getPositionerProps()}>
        <ul {...api.getContentProps()}>
          <li {...api.getItemProps({ value: 'edit' })}>Edit</li>
          <li {...api.getItemProps({ value: 'duplicate' })}>Duplicate</li>
          <li {...api.getItemProps({ value: 'delete' })}>Delete</li>
          <li {...api.getItemProps({ value: 'export' })}>Export...</li>
        </ul>
      </div>
    </div>
  );
}

If you can still reproduce this, consider using flushSync and let me know if it fixes the issue

onOpenChange: (details) => {
  flushSync(()=>{
      setOpen?.(details.open);
  })
},

[100terres]

@segunadebayo, I did more tests, and it appears that the issue I'm facing occurs when using my MacBook's trackpad. However, when I plug in a mouse and use it, I don't see the problem I described. Perhaps events are triggered differently depending on whether we are using a trackpad or a mouse, which could result in different behaviours.

[100terres]

Were you using a mouse when trying to reproduce the issue?

[100terres]

I have more details to provide:

1. Using flushSync seems to be a good workaround for the issue I'm facing.

2. I was able to narrow down the issue. It doesn't always happen with the trackpad. It only happens when I "tap to click", but when I make a real click with the trackpad, I don't have the issue.

Here are my trackpad settings:

[segunadebayo]

I used an external mouse to test it. That's weird to see that the trackpad and mouse behave slightly differently.

Use the flushSync approach for now until we can get to the root cause of this difference.

[100terres]

Perfect, I'll use the flushSync in the meantime. Thank you for your quick answers, and let me know if there's anything I can do to help.