Merge pull request #9552 from liyamahendra/9283

Solved the overlapping of payment options when clicking on 'Add Payment Method'

src/components/KYCWall/BaseKYCWall.js

@@ -5,7 +5,7 @@ import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
 import Navigation from '../../libs/Navigation/Navigation';
 import AddPaymentMethodMenu from '../AddPaymentMethodMenu';
-import getClickedElementLocation from '../../libs/getClickedElementLocation';
+import getClickedTargetLocation from '../../libs/getClickedTargetLocation';
 import * as PaymentUtils from '../../libs/PaymentUtils';
 import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -48,7 +48,7 @@ class KYCWall extends React.Component {
         if (!this.state.transferBalanceButton) {
             return;
         }
-        const buttonPosition = getClickedElementLocation(this.state.transferBalanceButton);
+        const buttonPosition = getClickedTargetLocation(this.state.transferBalanceButton);
         const position = this.getAnchorPosition(buttonPosition);
         this.setPositionAddPaymentMenu(position);
     }
@@ -92,13 +92,13 @@ class KYCWall extends React.Component {
      */
     continue(event) {
         this.setState({
-            transferBalanceButton: event.nativeEvent,
+            transferBalanceButton: event.nativeEvent.target,
         });
 
         // Check to see if user has a valid payment method on file and display the add payment popover if they don't
         if (!PaymentUtils.hasExpensifyPaymentMethod(this.props.cardList, this.props.bankAccountList)) {
             Log.info('[KYC Wallet] User does not have valid payment method');
-            const clickedElementLocation = getClickedElementLocation(event.nativeEvent);
+            const clickedElementLocation = getClickedTargetLocation(event.nativeEvent.target);
             const position = this.getAnchorPosition(clickedElementLocation);
             this.setPositionAddPaymentMenu(position);
             this.setState({

src/libs/getClickedTargetLocation/index.js

@@ -0,0 +1,11 @@
+/**
+ * Returns the Bounding Rectangle for the passed native event's target.
+ *
+ * @param {Object} target
+ * @returns {Object}
+ */
+function getClickedTargetLocation(target) {
+    return target.getBoundingClientRect();
+}
+
+export default getClickedTargetLocation;

src/libs/getClickedElementLocation/index.native.js → src/libs/getClickedTargetLocation/index.native.js

@@ -3,11 +3,11 @@
  *
  * @returns {Object}
  */
-function getClickedElementLocation() {
+function getClickedTargetLocation() {
     return {
         bottom: 0,
         left: 0,
     };
 }
 
-export default getClickedElementLocation;
+export default getClickedTargetLocation;

src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

@@ -19,7 +19,7 @@ import Popover from '../../../../components/Popover';
 import MenuItem from '../../../../components/MenuItem';
 import Text from '../../../../components/Text';
 import * as PaymentMethods from '../../../../libs/actions/PaymentMethods';
-import getClickedElementLocation from '../../../../libs/getClickedElementLocation';
+import getClickedTargetLocation from '../../../../libs/getClickedTargetLocation';
 import withWindowDimensions from '../../../../components/withWindowDimensions';
 import CurrentWalletBalance from '../../../../components/CurrentWalletBalance';
 import ONYXKEYS from '../../../../ONYXKEYS';
@@ -90,7 +90,7 @@ class BasePaymentsPage extends React.Component {
         if (!this.state.addPaymentMethodButton) {
             return;
         }
-        const buttonPosition = getClickedElementLocation(this.state.addPaymentMethodButton);
+        const buttonPosition = getClickedTargetLocation(this.state.addPaymentMethodButton);
         this.setPositionAddPaymentMenu(buttonPosition);
     }
 
@@ -129,9 +129,9 @@ class BasePaymentsPage extends React.Component {
      * @param {Boolean} isDefault
      */
     paymentMethodPressed(nativeEvent, accountType, account, isDefault) {
-        const position = getClickedElementLocation(nativeEvent);
+        const position = getClickedTargetLocation(nativeEvent.currentTarget);
         this.setState({
-            addPaymentMethodButton: nativeEvent,
+            addPaymentMethodButton: nativeEvent.currentTarget,
         });
         if (accountType) {
             let formattedSelectedPaymentMethod;