From 8d74d0a6f8b2d881dfc9fe9cfa478c73bc2eed32 Mon Sep 17 00:00:00 2001
From: Fadi Khadra <fdkhadra@gmail.com>
Date: Thu, 3 Nov 2022 20:24:52 +0100
Subject: [PATCH] fix close animation flash #219 #218

---
 src/components/Menu.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 17cbf274..b0fdf85f 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -27,6 +27,7 @@ import {
   isFn,
   isStr,
 } from './utils';
+import { flushSync } from 'react-dom';
 
 export interface MenuProps
   extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {
@@ -236,7 +237,7 @@ export const Menu: React.FC<MenuProps> = ({
 
     // prevent react from batching the state update
     // if the menu is already visible we have to recompute bounding rect based on position
-    setTimeout(() => {
+    flushSync(() => {
       setState({
         visible: true,
         willLeave: false,
@@ -245,7 +246,7 @@ export const Menu: React.FC<MenuProps> = ({
         triggerEvent: event,
         propsFromTrigger: props,
       });
-    }, 0);
+    });
   }
 
   function hide(event?: Event) {
@@ -268,7 +269,7 @@ export const Menu: React.FC<MenuProps> = ({
 
   function handleAnimationEnd() {
     if (state.willLeave && state.visible) {
-      setState({ visible: false, willLeave: false });
+      flushSync(() => setState({ visible: false, willLeave: false }));
     }
   }