Menu on closing bug

Do you want to request a feature or report a bug? Bug

What is the current behavior? Menu pops up for a seconds when closing. https://streamable.com/9ff7um

`const Test = () => { const { show } = useContextMenu({ id: “test” });

return (
    <>
        <div onContextMenu={(e) => {
            show(e, {
                id: "test"
            });
        }}>
            <Menu id={"test"}>
                <Item onClick={(e) => {console.log(2)}}>
                    We
                </Item>
            </Menu>
            WEWEWEWEW
        </div>
    </>
);

}`

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 18.2.0, Firefox, Chrome, Chromium on Windows 11

Also, I’m using Vite to the latest version.

[fkhadra]

Hey @ sotarules, thanks for the detailed write-up. The library has not been updated for a while, lack of time, covid, new kids, etc… Anyway, I’m currently working on the next version scheduled for this month. I’m trying to see if I can fix the issue without relying on flushSync if not then I’ll go for it

[sotarules]

This problem is caused by React 18 update batching. I have created a patch that seems to fix the problem. May patch affects function handleAnimationEnd (in react-contexify.esm.js):

  function handleAnimationEnd() {
    ReactDOM.flushSync(() => {
      if (state.willLeave && state.visible) {
        setState({
          visible: false,
          willLeave: false
        });
      }
    })
  }

I’ve added flushSync to ensure that these animation end state changes are not batched. Here is my best understanding of why this fixes the problem. It all hinges on how the menu is hidden.

    hasExitAnimation(animation) ? setState(function (state) {
      return {
        willLeave: state.visible
      };
    }) : setState(function (state) {
      return {
        visible: state.visible ? false : state.visible
      };
    });

Assuming the context menu is animated, the system will set willLeave to true. But React 18 batch update logic prevents willLeave from being set to true at the time handleAnimationEnd fires. This since state.willLeave is false, handleAnimationEnd fails to setState visible to false, causing the context menu to remain visible.

I’ve attached my patch-package that I used to fix the problem on my system. react-contexify+5.0.0.zip

By the way just for the record, I’m upset that the React developers chose to force the concept of batched updates on us. I have had to fight a number of issues, each of them not obvious, both in my own code plus a variety of third-party packages because of this. This has been very costly.