feat(Menu): Add onClose prop and @close event

[phegman]

I am building a filter component and I want to be able to reset the options if a user closes the dropdown without selecting a filter option. Currently it doesn't seem like there is a way to detect when the Menu component is closed.

Example use case

Screen.Recording.2022-10-22.at.5.43.31.PM.mov

I would like the dropdown to reset after the user selects Filter 3 and then closes the dropdown but there is currently no way to detect that the dropdown was closed.

[gztomas]

I would like to bump this. It sounds like a pretty important missing feature. This is for example a Linear filter. The search text is cleared every time the menu/combobox is open/closed. There might be a couple of hacky ways to accomplish that with HUI today. Maybe adding a Transition and using afterLeave which feels wrong if a transition is not wanted. Or using unmount and moving the state to some children.

Screen.Recording.2023-03-08.at.15.21.41.mov

There is a Combobox example in the HUI page showing how onClose is needed:

[mikemathewson]

Save the below code into your own Menu.jsx and in your code replace the Menu from headlessui with this one.

import { Menu } from "@headlessui/react";
import { useEffect, useRef } from "react";

const MyMenu = ({ children, onOpen, onClose, ...props }) => {
	return (
		<Menu {...props}>
			{({ open }) => <MenuEventHandler children={children} open={open} onOpen={onOpen} onClose={onClose} />}
		</Menu>
	);
};

const MenuEventHandler = ({ children, open, onOpen, onClose }) => {
	const initialMount = useRef(true);

	useEffect(() => {
		if (!initialMount.current) {
			open ? onOpen && onOpen() : onClose && onClose();
		}
		initialMount.current = false;
	}, [open]);

	return children;
};

export { MyMenu as Menu }