fix non-toggle popover to toggle

src/components/ButtonWithDropdownMenu.js

@@ -45,6 +45,9 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+
+    /* ref for the button */
+    buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 const defaultProps = {
@@ -56,6 +59,7 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
+    buttonRef: () => {},
 };
 
 function ButtonWithDropdownMenu(props) {
@@ -90,6 +94,7 @@ function ButtonWithDropdownMenu(props) {
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, ...props.style]}>
                     <Button
                         success
+                        ref={props.buttonRef}
                         onPress={(event) => props.onPress(event, selectedItem.value)}
                         text={selectedItem.text}
                         isDisabled={props.isDisabled}
@@ -104,7 +109,7 @@ function ButtonWithDropdownMenu(props) {
                         success
                         isDisabled={props.isDisabled}
                         style={[styles.pl0]}
-                        onPress={() => setIsMenuVisible(true)}
+                        onPress={() => setIsMenuVisible(!isMenuVisible)}
                         shouldRemoveLeftBorderRadius
                     >
                         <Icon

src/components/KYCWall/BaseKYCWall.js

@@ -23,6 +23,7 @@ class KYCWall extends React.Component {
 
         this.continue = this.continue.bind(this);
         this.setMenuPosition = this.setMenuPosition.bind(this);
+        this.anchorRef = React.createRef(null);
 
         this.state = {
             shouldShowAddPaymentMenu: false,
@@ -95,6 +96,10 @@ class KYCWall extends React.Component {
      * @param {String} iouPaymentType
      */
     continue(event, iouPaymentType) {
+        if (this.state.shouldShowAddPaymentMenu) {
+            this.setState({shouldShowAddPaymentMenu: false});
+            return;
+        }
         this.setState({transferBalanceButton: event.nativeEvent.target});
         const isExpenseReport = ReportUtils.isExpenseReport(this.props.iouReport);
         const paymentCardList = this.props.fundList || {};
@@ -113,7 +118,6 @@ class KYCWall extends React.Component {
             });
             return;
         }
-
         if (!isExpenseReport) {
             // Ask the user to upgrade to a gold wallet as this means they have not yet gone through our Know Your Customer (KYC) checks
             const hasGoldWallet = this.props.userWallet.tierName && this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
@@ -123,7 +127,6 @@ class KYCWall extends React.Component {
                 return;
             }
         }
-
         Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them');
         this.props.onSuccessfulKYC(iouPaymentType);
     }
@@ -134,6 +137,7 @@ class KYCWall extends React.Component {
                 <AddPaymentMethodMenu
                     isVisible={this.state.shouldShowAddPaymentMenu}
                     onClose={() => this.setState({shouldShowAddPaymentMenu: false})}
+                    anchorRef={this.anchorRef}
                     anchorPosition={{
                         vertical: this.state.anchorPositionVertical,
                         horizontal: this.state.anchorPositionHorizontal,
@@ -148,7 +152,7 @@ class KYCWall extends React.Component {
                         }
                     }}
                 />
-                {this.props.children(this.continue)}
+                {this.props.children(this.continue, this.anchorRef)}
             </>
         );
     }

src/components/SettlementButton.js

@@ -174,8 +174,9 @@ class SettlementButton extends React.Component {
                 chatReportID={this.props.chatReportID}
                 iouReport={this.props.iouReport}
             >
-                {(triggerKYCFlow) => (
+                {(triggerKYCFlow, buttonRef) => (
                     <ButtonWithDropdownMenu
+                        buttonRef={buttonRef}
                         isDisabled={this.props.isDisabled}
                         isLoading={this.props.isLoading}
                         onPress={(event, iouPaymentType) => {

src/components/ThreeDotsMenu/index.js

@@ -78,6 +78,10 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
                 <Tooltip text={translate(iconTooltip)}>
                     <PressableWithoutFeedback
                         onPress={() => {
+                            if (isPopupMenuVisible) {
+                                hidePopoverMenu();
+                                return;
+                            }
                             showPopoverMenu();
                             if (onIconPress) {
                                 onIconPress();
@@ -102,6 +106,8 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
                 anchorAlignment={anchorAlignment}
                 onItemSelected={hidePopoverMenu}
                 menuItems={menuItems}
+                withoutOverlay
+                anchorRef={buttonRef}
             />
         </>
     );

src/pages/settings/Wallet/WalletPage/BaseWalletPage.js

@@ -128,6 +128,11 @@ function BaseWalletPage(props) {
      * @param {String|Number} methodID
      */
     const paymentMethodPressed = (nativeEvent, accountType, account, isDefault, methodID) => {
+        if (shouldShowAddPaymentMenu) {
+            setShouldShowAddPaymentMenu(false);
+            return;
+        }
+
         paymentMethodButtonRef.current = nativeEvent.currentTarget;
 
         // The delete/default menu
@@ -294,8 +299,9 @@ function BaseWalletPage(props) {
                                     addDebitCardRoute={ROUTES.SETTINGS_ADD_DEBIT_CARD}
                                     popoverPlacement="bottom"
                                 >
-                                    {(triggerKYCFlow) => (
+                                    {(triggerKYCFlow, buttonRef) => (
                                         <MenuItem
+                                            ref={buttonRef}
                                             title={translate('common.transferBalance')}
                                             icon={Expensicons.Transfer}
                                             onPress={triggerKYCFlow}