[HOLD for payment 2024-08-01] [$250] Cannot select a word in native iOS composer if composed message have an emoji

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @mountiny
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1719405668302249

Action Performed:

1. Launch the app
2. Initiate a DM with any user
3. Compose a message with emoji
4. Try selecting a word by long press or double tab

Expected Result:

Able to select word by long press or by double tapping

Actual Result:

Unable to select by long press or by double tapping

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari

RPReplay_Final1717078125.MP4

RPReplay_Final1719422598.MP4

• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a59336e899fcaa47
• Upwork Job ID: 1806116311980257786
• Last Price Increase: 2024-06-27
• Automatic offers:
• QichenZhu | Contributor | 102976322

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a59336e899fcaa47

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

[mountiny]

cc @BartoszGrajdek @tomekzaw

[BartoszGrajdek]

Let's add this to the Live Markdown project @mountiny

[sandipanghos]

@mountiny is this still open for proposal? I am working on it

[QichenZhu]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Cannot select a word in the native iOS composer if the message contains an emoji.

What is the root cause of that problem?

Originally, React Native had an issue with TextInput when using emojis.

All emoji characters are automatically given an AppleColorEmoji NSFont attribute and the original font is moved to NSOriginalFont attribute.

This causes an issue when we call isEqualToAttributedString when we set the attributedText, since it will always be false if an emoji is present.

React Native fixed this by ignoring all attributes in such cases.

https://github.com/facebook/react-native/blob/9269429bb955d47088793a2e32454fddb712152b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm#L130-L167

However, this fix caused Expensify/react-native-live-markdown#293 and #41390, and was reverted by Expensify/react-native-live-markdown#318.

What changes do you think we should make in order to solve the problem?

Making clones of newText and oldText and removing the NSOriginalFont and NSFont attributes from them before calling isEqualToAttributedString.

• https://github.com/Expensify/react-native-live-markdown/blob/a07ba8e56f81e2da29fba226083da64f4ee44bcf/ios/RCTTextInputComponentView%2BMarkdown.mm#L54

• https://github.com/Expensify/react-native-live-markdown/blob/a07ba8e56f81e2da29fba226083da64f4ee44bcf/ios/RCTBaseTextInputView%2BMarkdown.mm#L30

-    return [newText isEqualToAttributedString:oldText];
+    NSMutableAttributedString *newTextCopy = [newText mutableCopy];
+    NSMutableAttributedString *oldTextCopy = [oldText mutableCopy];
+    [newTextCopy removeAttribute:@"NSFont" range:NSMakeRange(0, newTextCopy.length)];
+    [oldTextCopy removeAttribute:@"NSFont" range:NSMakeRange(0, oldTextCopy.length)];
+    [oldTextCopy removeAttribute:@"NSOriginalFont" range:NSMakeRange(0, oldTextCopy.length)];
+    return [newTextCopy isEqualToAttributedString:oldTextCopy];

What alternative solutions did you explore? (Optional)

N/A