Skip to content

Instantly share code, notes, and snippets.

@cubuspl42
Created October 19, 2023 11:46
Show Gist options
  • Save cubuspl42/65231dadc9f909d88fe7637afeaef9e8 to your computer and use it in GitHub Desktop.
Save cubuspl42/65231dadc9f909d88fe7637afeaef9e8 to your computer and use it in GitHub Desktop.
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;
@@ -116,6 +139,7 @@ function ReportActionItemFragment(props) {
return (
<Text style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}>
+ {checkForEmojiForSelection(text, props.displayAsGroup)}
<Text
selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style, isPendingDelete ? styles.offlineFeedback.deleted : undefined]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment