fix: menu unmount issue

Author: surajahmed

src/components/composites/Menu/Menu.tsx

@@ -79,36 +79,35 @@ const Menu = (
   return (
     <>
       {updatedTrigger()}
-      {isOpen && (
-        <Overlay
-          isOpen={isOpen}
-          onRequestClose={handleClose}
-          useRNModalOnAndroid
-          {..._overlay}
-        >
-          <PresenceTransition visible={isOpen} {..._presenceTransition}>
-            <Popper
-              triggerRef={triggerRef}
-              onClose={handleClose}
-              placement={placement}
-              {...resolvedProps}
-            >
-              <Backdrop onPress={handleClose} {..._backdrop} />
-              <Popper.Content isOpen={isOpen}>
-                <MenuContext.Provider
-                  value={{ closeOnSelect, onClose: handleClose }}
-                >
-                  <FocusScope contain restoreFocus autoFocus>
-                    <MenuContent menuRef={ref} {...resolvedProps}>
-                      {children}
-                    </MenuContent>
-                  </FocusScope>
-                </MenuContext.Provider>
-              </Popper.Content>
-            </Popper>
-          </PresenceTransition>
-        </Overlay>
-      )}
+      <Overlay
+        isOpen={isOpen}
+        onRequestClose={handleClose}
+        useRNModalOnAndroid
+        {..._overlay}
+        unmountOnExit
+      >
+        <PresenceTransition visible={isOpen} {..._presenceTransition}>
+          <Popper
+            triggerRef={triggerRef}
+            onClose={handleClose}
+            placement={placement}
+            {...resolvedProps}
+          >
+            <Backdrop onPress={handleClose} {..._backdrop} />
+            <Popper.Content isOpen={isOpen}>
+              <MenuContext.Provider
+                value={{ closeOnSelect, onClose: handleClose }}
+              >
+                <FocusScope contain restoreFocus autoFocus>
+                  <MenuContent menuRef={ref} {...resolvedProps}>
+                    {children}
+                  </MenuContent>
+                </FocusScope>
+              </MenuContext.Provider>
+            </Popper.Content>
+          </Popper>
+        </PresenceTransition>
+      </Overlay>
     </>
   );
 };

src/components/composites/Popover/Popover.tsx

@@ -73,44 +73,43 @@ const Popover = (
   return (
     <Box ref={ref}>
       {updatedTrigger()}
-      {isOpen && (
-        <Overlay
-          isOpen={isOpen}
-          onRequestClose={handleClose}
-          useRNModalOnAndroid
+      <Overlay
+        isOpen={isOpen}
+        onRequestClose={handleClose}
+        useRNModalOnAndroid
+        unmountOnExit
+      >
+        <PresenceTransition
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1, transition: { duration: 150 } }}
+          exit={{ opacity: 0, scale: 0.95, transition: { duration: 100 } }}
+          visible={isOpen}
+          style={StyleSheet.absoluteFill}
         >
-          <PresenceTransition
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1, transition: { duration: 150 } }}
-            exit={{ opacity: 0, scale: 0.95, transition: { duration: 100 } }}
-            visible={isOpen}
-            style={StyleSheet.absoluteFill}
-          >
-            <Popper onClose={handleClose} triggerRef={triggerRef} {...props}>
-              <Backdrop onPress={handleClose} bg="transparent" />
-              <PopoverContext.Provider
-                value={{
-                  onClose: handleClose,
-                  initialFocusRef,
-                  finalFocusRef,
-                  popoverContentId,
-                  bodyId,
-                  headerId,
-                  headerMounted,
-                  bodyMounted,
-                  setBodyMounted,
-                  setHeaderMounted,
-                  isOpen,
-                }}
-              >
-                <FocusScope contain={trapFocus} restoreFocus autoFocus>
-                  {children}
-                </FocusScope>
-              </PopoverContext.Provider>
-            </Popper>
-          </PresenceTransition>
-        </Overlay>
-      )}
+          <Popper onClose={handleClose} triggerRef={triggerRef} {...props}>
+            <Backdrop onPress={handleClose} bg="transparent" />
+            <PopoverContext.Provider
+              value={{
+                onClose: handleClose,
+                initialFocusRef,
+                finalFocusRef,
+                popoverContentId,
+                bodyId,
+                headerId,
+                headerMounted,
+                bodyMounted,
+                setBodyMounted,
+                setHeaderMounted,
+                isOpen,
+              }}
+            >
+              <FocusScope contain={trapFocus} restoreFocus autoFocus>
+                {children}
+              </FocusScope>
+            </PopoverContext.Provider>
+          </Popper>
+        </PresenceTransition>
+      </Overlay>
     </Box>
   );
 };

src/components/primitives/Overlay/Overlay.tsx

@@ -15,6 +15,7 @@ export interface IOverlayProps {
   isKeyboardDismissable?: boolean;
   animationPreset?: 'fade' | 'slide' | 'none';
   style?: ViewStyle;
+  unmountOnExit?: boolean;
 }
 
 export function Overlay({
@@ -26,6 +27,7 @@ export function Overlay({
   animationPreset = 'fade',
   onRequestClose,
   style,
+  unmountOnExit,
 }: IOverlayProps) {
   const [exited, setExited] = React.useState(!isOpen);
 
@@ -56,6 +58,10 @@ export function Overlay({
     );
   }
 
+  if (unmountOnExit && !isOpen && exited) {
+    return null;
+  }
+
   return (
     //@ts-ignore
     <OverlayContainer style={{ ...styleObj }}>