[HOLD for payment 2023-11-09] [$500] Chat - Compose box - Wrong cursor position for RTL texts and inverted arrow keys functionality

[izarutskaya]

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

---

Action Performed:

1. Open any chat and paste an RTL text, for example " مثال "
2. Continue typing some content and observe the position of the cursor
3. Use the keyboard arrow keys to traverse through the words

Expected Result:

The cursor should be at the right side and the arrow key functionality should not be inversed

Actual Result:

Arrow key functionality becomes inversed and the cursor stays at the beginning of the words but the typing starts from the right.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.74-0

Reproducible in staging?: Y

Reproducible in production?: Y

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

Notes/Photos/Videos: Any additional supporting documentation

2023-09-20.15.54.49.1.mp4

Recording.1623.mp4

Expensify/Expensify Issue URL:

Issue reported by: @Nathan-Mulugeta

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695214719275969

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0144577636f8a78e75
• Upwork Job ID: 1706316639252033536
• Last Price Increase: 2023-10-09
• Automatic offers:
• Nathan-Mulugeta | Reporter | 27126818

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0144577636f8a78e75

[melvin-bot]

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to @trjExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[HardikChoudhary24]

Proposal

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

• Wrong cursor position for RTL texts and inverted arrow keys functionality

What is the root cause of that problem?

• The root cause of this issue lies within the convertToLTR function (that converts RTL text to a LTR text using Unicode controls) and ComposerWithSuggestions Component, which is primarily responsible for rendering the input value. The problem arises due to const convertToLTR: ConvertToLTR = (text) => text; which does not converts the RTL text to LTR text.

App/src/libs/convertToLTR/index.ts

Line 3 in e74b4d2

const convertToLTR: ConvertToLTR = (text) => text;

• Also in the ComposerWithSuggestions Component the value prop passed to Composer component is not converted to LTR text.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

Lines 492 to 529 in e74b4d2

	<Composer
	checkComposerVisibility={checkComposerVisibility}
	autoFocus={shouldAutoFocus}
	multiline
	ref={setTextInputRef}
	textAlignVertical="top"
	placeholder={inputPlaceholder}
	placeholderTextColor={themeColors.placeholderText}
	onChangeText={(commentValue) => updateComment(commentValue, true)}
	onKeyPress={triggerHotkeyActions}
	style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
	maxLines={maxComposerLines}
	onFocus={onFocus}
	onBlur={onBlur}
	onClick={setShouldBlockSuggestionCalcToFalse}
	onPasteFile={displayFileInModal}
	shouldClear={textInputShouldClear}
	onClear={() => setTextInputShouldClear(false)}
	isDisabled={isBlockedFromConcierge || disabled}
	isReportActionCompose
	selection={selection}
	onSelectionChange={onSelectionChange}
	isFullComposerAvailable={isFullComposerAvailable}
	setIsFullComposerAvailable={setIsFullComposerAvailable}
	isComposerFullSize={isComposerFullSize}
	value={value}
	numberOfLines={numberOfLines}
	onNumberOfLinesChange={updateNumberOfLines}
	shouldCalculateCaretPosition
	onLayout={(e) => {
	const composerLayoutHeight = e.nativeEvent.layout.height;
	if (composerHeight === composerLayoutHeight) {
	return;
	}
	setComposerHeight(composerLayoutHeight);
	}}
	onScroll={hideSuggestionMenu}
	/>

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

• To address this problem, we can resolve it by simply changing the convertToLTR function .

import CONST from '../../CONST';
import ConvertToLTR from './types';

const convertToLTR: ConvertToLTR = (text) => `${CONST.UNICODE.LTR}${text}`;

export default convertToLTR;

• And then converting the value prop passed to the Composer Component to LTR

value={convertToLTR(value)}

What alternative solutions did you explore? (Optional)
N/A

[burczu]

@HardikChoudhary24 I'm not sure if your proposal solves the issue correctly - I've tried and it shows the RTL text immediately at left. I guess it should show up at right at first and behave as RTL text until we start typing LTR letters - then it should be converted to LTR. Am I right @izarutskaya?