set popoverAnchorRefs

Author: s77rt

src/components/ConnectToNetSuiteFlow/index.tsx

@@ -18,7 +18,11 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
     const {translate} = useLocalize();
 
     const hasPoliciesConnectedToNetSuite = !!getAdminPoliciesConnectedToNetSuite()?.length;
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
     const [isReuseConnectionsPopoverOpen, setIsReuseConnectionsPopoverOpen] = useState(false);
     const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
     const {popoverAnchorRefs} = useAccountingContext();
@@ -57,7 +61,7 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
     }, []);
 
     if (threeDotsMenuContainerRef) {
-        if (!shouldUseNarrowLayout) {
+        if (!isSmallScreenWidth) {
             threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
                 const horizontal = x + width;
                 const vertical = y + height;

src/components/MenuItem.tsx

@@ -1,5 +1,5 @@
 import type {ImageContentFit} from 'expo-image';
-import type {ReactElement, ReactNode} from 'react';
+import type {ReactElement, ReactNode, Ref} from 'react';
 import React, {forwardRef, useContext, useMemo} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {ActivityIndicator, View} from 'react-native';
@@ -60,6 +60,9 @@ type NoIcon = {
 };
 
 type MenuItemBaseProps = {
+    /* View ref  */
+    ref?: Ref<View>;
+
     /** Function to fire when component is pressed */
     onPress?: (event: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 

src/pages/workspace/accounting/MultiConnectionSelectorPage.tsx

@@ -1,5 +1,6 @@
 import {title} from 'process';
 import React, {useMemo} from 'react';
+import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -38,7 +39,6 @@ function MultiConnectionSelectorPage({policy, route}: MultiConnectionSelectorPag
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    // s77rt: set popoverAnchorRefs
     const {startIntegrationFlow, popoverAnchorRefs} = useAccountingContext();
 
     const integrations = CONST.POLICY.CONNECTIONS.MULTI_CONNECTIONS_MAPPING_INVERTED[multiConnectionName] ?? [];
@@ -65,6 +65,14 @@ function MultiConnectionSelectorPage({policy, route}: MultiConnectionSelectorPag
                                 //shouldDisconnectIntegrationBeforeConnecting: true,
                             });
                         },
+                        ref: (ref) => {
+                            if (!popoverAnchorRefs?.current) {
+                                return;
+                            }
+
+                            // eslint-disable-next-line react-compiler/react-compiler
+                            popoverAnchorRefs.current[integration].current = ref;
+                        },
                     };
 
                     return connectionsMenuItem;
@@ -88,11 +96,13 @@ function MultiConnectionSelectorPage({policy, route}: MultiConnectionSelectorPag
                 shouldShowOfflineIndicatorInWideScreen
             >
                 <HeaderWithBackButton title={translate(`workspace.multiConnectionSelector.title`, {connectionName: multiConnectionName})} />
-                <Text style={[styles.ph5, styles.pt3, styles.mb5]}>{translate(`workspace.multiConnectionSelector.description`, {connectionName: multiConnectionName})}</Text>
-                <MenuItemList
-                    menuItems={connectionsMenuItems}
-                    shouldUseSingleExecution
-                />
+                <View style={[styles.flexGrow1]}>
+                    <Text style={[styles.mb5, styles.ph5, styles.pt3]}>{translate(`workspace.multiConnectionSelector.description`, {connectionName: multiConnectionName})}</Text>
+                    <MenuItemList
+                        menuItems={connectionsMenuItems}
+                        shouldUseSingleExecution
+                    />
+                </View>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );