Merge pull request #20447 from tienifr/fix/19303-mention-not-show-bea…

…m-on-selection Fix: Mention does not show beam on selection
Expensify · Jun 14, 2023 · 7f936b7 · 7f936b7
2 parents 63c1264 + f24fb4f
commit 7f936b7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -9,6 +9,7 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
 import withCurrentUserPersonalDetails from '../../withCurrentUserPersonalDetails';
 import personalDetailsPropType from '../../../pages/personalDetailsPropType';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import TextLink from '../../TextLink';
 
 const propTypes = {
     ...htmlRendererPropTypes,
@@ -30,22 +31,23 @@ function MentionUserRenderer(props) {
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
 
     // We need to remove the leading @ from data as it is not part of the login
-    const loginWhithoutLeadingAt = props.tnode.data.slice(1);
+    const loginWithoutLeadingAt = props.tnode.data.slice(1);
 
-    const isOurMention = loginWhithoutLeadingAt === props.currentUserPersonalDetails.login;
+    const isOurMention = loginWithoutLeadingAt === props.currentUserPersonalDetails.login;
 
     return (
         <Text>
-            <Tooltip text={loginWhithoutLeadingAt}>
-                <Text
+            <Tooltip text={loginWithoutLeadingAt}>
+                <TextLink
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultRendererProps}
+                    href={ROUTES.getDetailsRoute(loginWithoutLeadingAt)}
                     color={StyleUtils.getMentionTextColor(isOurMention)}
                     style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention)]}
-                    onPress={() => showUserDetails(loginWhithoutLeadingAt)}
+                    onPress={() => showUserDetails(loginWithoutLeadingAt)}
                 >
                     <TNodeChildrenRenderer tnode={props.tnode} />
-                </Text>
+                </TextLink>
             </Tooltip>
         </Text>
     );

diff --git a/src/components/TextLink.js b/src/components/TextLink.js
@@ -31,6 +31,7 @@ const defaultProps = {
 };
 
 function TextLink(props) {
+    const rest = _.omit(props, _.keys(propTypes));
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
 
     /**
@@ -64,6 +65,8 @@ function TextLink(props) {
             onPress={openLink}
             onMouseDown={props.onMouseDown}
             onKeyDown={openLinkIfEnterKeyPressed}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
         >
             {props.children}
         </Text>