fix: adjust pointer events on menu wrappers (#3938)

Author: lukewalczak

src/components/Menu/Menu.tsx

@@ -603,6 +603,8 @@ class Menu extends React.Component<Props, State> {
       ...(I18nManager.getConstants().isRTL ? { right: left } : { left }),
     };
 
+    const pointerEvents = visible ? 'box-none' : 'none';
+
     return (
       <View
         ref={(ref) => {
@@ -627,12 +629,18 @@ class Menu extends React.Component<Props, State> {
               collapsable={false}
               accessibilityViewIsModal={visible}
               style={[styles.wrapper, positionStyle, style]}
-              pointerEvents={visible ? 'box-none' : 'none'}
+              pointerEvents={pointerEvents}
               onAccessibilityEscape={onDismiss}
               testID={`${testID}-view`}
             >
-              <Animated.View style={{ transform: positionTransforms }}>
+              <Animated.View
+                pointerEvents={pointerEvents}
+                style={{
+                  transform: positionTransforms,
+                }}
+              >
                 <Surface
+                  pointerEvents={pointerEvents}
                   style={[
                     styles.shadowMenuContainer,
                     shadowMenuContainerStyle,

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

@@ -206,6 +206,7 @@ Array [
     >
       <View
         collapsable={false}
+        pointerEvents="box-none"
         style={
           Object {
             "transform": Array [
@@ -249,6 +250,7 @@ Array [
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
                 "backgroundColor": "rgb(243, 237, 246)",
@@ -845,6 +847,7 @@ Array [
     >
       <View
         collapsable={false}
+        pointerEvents="box-none"
         style={
           Object {
             "transform": Array [
@@ -886,6 +889,7 @@ Array [
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
                 "backgroundColor": "rgb(243, 237, 246)",