fix(Menu): defer unmounting Portal until hide animation finishes (#4845)

* (fix): defer unmounting Portal until hide animation finishes

* fix(menu): wait a tick before ensuring the component

* fix(menu): add pointerEvents to snapshot styles

Author: bradstiff

src/components/Menu/Menu.tsx

@@ -395,7 +395,7 @@ const Menu = ({
           return;
         }
 
-        if (!display && prevRendered.current) {
+        if (!display) {
           hide();
         }
 
@@ -430,15 +430,23 @@ const Menu = ({
     if (prevVisible.current !== visible) {
       prevVisible.current = visible;
 
-      if (visible !== rendered) {
-        setRendered(visible);
+      if (visible) {
+        if (!rendered) {
+          // Mount the Portal before attempting to show.
+          setRendered(true);
+        }
+      } else {
+        // Keep the Portal mounted so the hide animation can finish.
+        updateVisibility(false);
       }
     }
-  }, [visible, rendered]);
+  }, [visible, rendered, updateVisibility]);
 
   React.useEffect(() => {
-    updateVisibility(rendered);
-  }, [rendered, updateVisibility]);
+    if (rendered && visible) {
+      updateVisibility(true);
+    }
+  }, [rendered, visible, updateVisibility]);
 
   // I don't know why but on Android measure function is wrong by 24
   const additionalVerticalValue = Platform.select({
@@ -639,6 +647,7 @@ const Menu = ({
             accessibilityLabel={overlayAccessibilityLabel}
             accessibilityRole="button"
             onPress={onDismiss}
+            pointerEvents={visible ? 'auto' : 'none'}
             style={styles.pressableOverlay}
           />
           <View

src/components/__tests__/Menu.test.tsx

@@ -131,6 +131,8 @@ it('uses the default anchorPosition of top', async () => {
   // itself.
   await act(async () => {
     screen.update(makeMenu(true));
+    // Menu waits a tick for Portal refs to be up-to-date.
+    await Promise.resolve();
   });
 
   await waitFor(() => {
@@ -182,6 +184,8 @@ it('respects anchorPosition bottom', async () => {
 
   await act(async () => {
     screen.update(makeMenu(true));
+    // Menu waits a tick for Portal refs to be up-to-date.
+    await Promise.resolve();
   });
 
   await waitFor(() => {

src/components/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -209,6 +209,7 @@ exports[`renders menu with content styles 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      pointerEvents="auto"
       style={
         {
           "bottom": 0,
@@ -933,6 +934,7 @@ exports[`renders visible menu 1`] = `
       onResponderTerminate={[Function]}
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
+      pointerEvents="auto"
       style={
         {
           "bottom": 0,