Merge pull request #12940 from Delgee/issue-12715

Added onMouseDown prop to TextLink component, fixed issue of not able to open link with one click in BankAccountManualStep component
Expensify · Nov 24, 2022 · 2370b31 · 2370b31
2 parents 97b2dbc + e54466d
commit 2370b31
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
@@ -22,20 +22,24 @@ const propTypes = {
 
     /** Overwrites the default link behavior with a custom callback */
     onPress: PropTypes.func,
+
+    /** Callback that is called when mousedown is triggered */
+    onMouseDown: PropTypes.func,
 };
 
 const defaultProps = {
     href: undefined,
     style: [],
     onPress: undefined,
+    onMouseDown: undefined,
 };
 
 const TextLink = (props) => {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
 
     /**
-     * @param {Event} event
-     */
+   * @param {Event} event
+   */
     const openLink = (event) => {
         event.preventDefault();
         if (props.onPress) {
@@ -47,8 +51,8 @@ const TextLink = (props) => {
     };
 
     /**
-     * @param {Event} event
-     */
+   * @param {Event} event
+   */
     const openLinkIfEnterKeyPressed = (event) => {
         if (event.key !== 'Enter') {
             return;
@@ -62,6 +66,7 @@ const TextLink = (props) => {
             accessibilityRole="link"
             href={props.href}
             onPress={openLink}
+            onMouseDown={props.onMouseDown}
             onKeyDown={openLinkIfEnterKeyPressed}
         >
             {props.children}

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -119,7 +119,12 @@ class BankAccountManualStep extends React.Component {
                                 <Text>
                                     {this.props.translate('common.iAcceptThe')}
                                 </Text>
-                                <TextLink href="https://use.expensify.com/terms">
+                                <TextLink
+                                    href="https://use.expensify.com/terms"
+
+                                    // to call the onPress in the TextLink before the input blur is fired and shift the link element
+                                    onMouseDown={e => e.preventDefault()}
+                                >
                                     {`Expensify ${this.props.translate('common.termsOfService')}`}
                                 </TextLink>
                             </View>