diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js index d1bb9309579d..d8e1527189ad 100644 --- a/src/components/KYCWall/BaseKYCWall.js +++ b/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({ diff --git a/src/libs/getClickedElementLocation/index.js b/src/libs/getClickedElementLocation/index.js deleted file mode 100644 index f29a57ebf5c0..000000000000 --- a/src/libs/getClickedElementLocation/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * We don't need to get the position of the element on native platforms because the popover will be bottom mounted - * - * @param {Object} nativeEvent - * @returns {Object} - */ -function getClickedElementLocation(nativeEvent) { - return nativeEvent.target.getBoundingClientRect(); -} - -export default getClickedElementLocation; diff --git a/src/libs/getClickedTargetLocation/index.js b/src/libs/getClickedTargetLocation/index.js new file mode 100644 index 000000000000..fac03005fa02 --- /dev/null +++ b/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; diff --git a/src/libs/getClickedElementLocation/index.native.js b/src/libs/getClickedTargetLocation/index.native.js similarity index 71% rename from src/libs/getClickedElementLocation/index.native.js rename to src/libs/getClickedTargetLocation/index.native.js index e6ed6a720435..6d490643d916 100644 --- a/src/libs/getClickedElementLocation/index.native.js +++ b/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; diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 148f27fa8672..c404f2d51953 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/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;