Merge pull request #30081 from ayazalavi/ayaz/GH-29021_am_pm_selectio…

…n_bug [CP Staging] added component
Expensify · Oct 20, 2023 · 115974e · 115974e
2 parents 212e405 + b4fb81a
commit 115974e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/src/components/ZeroWidthView/index.js b/src/components/ZeroWidthView/index.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as EmojiUtils from '../../libs/EmojiUtils';
+import * as Browser from '../../libs/Browser';
+import Text from '../Text';
+
+const propTypes = {
+    /** If this is the Concierge chat, we'll open the modal for requesting a setup call instead of showing popover menu */
+    text: PropTypes.string,
+
+    /** URL to the assigned guide's appointment booking calendar */
+    displayAsGroup: PropTypes.bool,
+};
+
+const defaultProps = {
+    text: '',
+    displayAsGroup: false,
+};
+
+function ZeroWidthView({text, displayAsGroup}) {
+    const firstLetterIsEmoji = EmojiUtils.isFirstLetterEmoji(text);
+    if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) {
+        return <Text>&#x200b;</Text>;
+    }
+    return null;
+}
+
+ZeroWidthView.propTypes = propTypes;
+ZeroWidthView.defaultProps = defaultProps;
+ZeroWidthView.displayName = 'ZeroWidthView';
+
+export default ZeroWidthView;
diff --git a/src/components/ZeroWidthView/index.native.js b/src/components/ZeroWidthView/index.native.js
@@ -0,0 +1,5 @@
+function ZeroWidthView() {
+    return null;
+}
+
+export default ZeroWidthView;
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -18,7 +18,7 @@ import CONST from '../../../CONST';
 import editedLabelStyles from '../../../styles/editedLabelStyles';
 import UserDetailsTooltip from '../../../components/UserDetailsTooltip';
 import avatarPropTypes from '../../../components/avatarPropTypes';
-import * as Browser from '../../../libs/Browser';
+import ZeroWidthView from '../../../components/ZeroWidthView';
 
 const propTypes = {
     /** Users accountID */
@@ -90,24 +90,6 @@ const defaultProps = {
 };
 
 function ReportActionItemFragment(props) {
-    /**
-     * Checks text element for presence of emoji as first character
-     * and insert Zero-Width character to avoid selection issue
-     * mentioned here https://github.com/Expensify/App/issues/29021
-     *
-     * @param {String} text
-     * @param {Boolean} displayAsGroup
-     * @returns {ReactNode | null} Text component with zero width character
-     */
-
-    const checkForEmojiForSelection = (text, displayAsGroup) => {
-        const firstLetterIsEmoji = EmojiUtils.isFirstLetterEmoji(text);
-        if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) {
-            return <Text>&#x200b;</Text>;
-        }
-        return null;
-    };
-
     switch (props.fragment.type) {
         case 'COMMENT': {
             const {html, text} = props.fragment;
@@ -139,7 +121,10 @@ function ReportActionItemFragment(props) {
 
             return (
                 <Text style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}>
-                    {checkForEmojiForSelection(text, props.displayAsGroup)}
+                    <ZeroWidthView
+                        text={text}
+                        displayAsGroup={props.displayAsGroup}
+                    />
                     <Text
                         selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
                         style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style, isPendingDelete ? styles.offlineFeedback.deleted : undefined]}