I've been looking into this interesting behavior and I think I might have found a potential cause. It seems to be related to PR #2741, where items marked as disabled are implemented using the native HTML disabled attribute, which prevents focus/blur events. This explains why having at least one enabled item allows the expected behavior to work.

One potential approach could be to use aria-disabled instead of the native disabled attribute. Would love to hear thoughts on this direction - if it seems reasonable, I'd be happy to create a PR.

import React, { useState, useRef, useEffect } from 'react';
import { Menu, IconButton } from '@contentful/f36-components';
import { MenuIcon } from '@contentful/f36-icons';

export default function BasicMenu() {
const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef(null);

const handleMenuToggle = () => {
setIsOpen((prev) => !prev);
};

const handleClickOutside = (event) => {
if (menuRef.current && !menuRef.current.contains(event.target)) {
setIsOpen(false);
}
};

useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);

return (

I hope this will work. Happy coding :)

@ManasiRoy, thanks for your suggestion. Did you accidentally paste the wrong code?
Your currently shared code does not compile. The icon prop for the IconButton is missing, you do not attach/pass the ref you create to something and need to wrap your returned JSX with a Menu component.

It seems like you intended to use the Menu as a controlled component, which is a good workaround but it wouldn't fix the behavior for the uncontrolled component when used with only disabled MenuItems.