New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Menu on closing bug #218
Comments
I have same question |
@kyro95 has you solve it? |
I think vite is issuing this bug, i've found a temp workaround, you have to play with react states and timers to make appear/disappear the context menu. |
I try to control it with react states, failed too.... |
Try this out const Component = () => {
useEffect(() => {
window.addEventListener("mousedown", handleMouseDown);
return () => {
window.removeEventListener("keydown", handleKeydown);
};
}, [render, setRender]);
const handleMouseDown = (event: MouseEvent) => {
setTimeout(() => {
setRender(false);
}, 150);
}
return (<></>);
}
export {
Component
}; |
👍 Thank you. Using this code, it works. Share my implementation. const Component = () => {
useEffect(() => {
window.onmousedown = handleMouseDown;
}, [render, setRender]);
const handleMouseDown = (event: MouseEvent) => {
const classNameStr = event?.target?.getAttribute('class');
if ( classNameStr.indexOf('react-contexify') !== -1 ) {
setTimeout(() => {
setRender(false);
}, 150);
} else {
setTimeout(() => {
setRender(true);
}, 150);
}
}
return (<></>);
}
export {
Component
}; But we still don`t know why this problem occurs, and hopefully it can be solved at all. |
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):
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.
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. 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. |
Thanks alot for identifying the issue, I'll test it out your patch when I'll get back to my workstation |
Hey @ sotarules, thanks for the detailed write-up. The library has not been updated for a while, lack of time, covid, new kids, etc... |
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"
});
}`
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.
The text was updated successfully, but these errors were encountered: