Fixed Android - Chat - Message gets displayed from right to left

src/libs/convertToLTR/index.android.ts

@@ -7,4 +7,26 @@ import ConvertToLTR from './types';
  */
 const convertToLTR: ConvertToLTR = (text) => `${CONST.UNICODE.LTR}${text}`;
 
+/** This is necessary to convert the input to LTR, there is a delay that causes the cursor not to go to the end of the input line when pasting text or typing fast. */
+const moveCursorToEndOfLine = (commentLength: number, setSelection:(value: React.SetStateAction<{
+    start: number;
+    end: number;
+}>)=>void) => {
+    setSelection({
+        start: commentLength + 1,
+        end: commentLength + 1,
+    });
+}
+
+/** We should remove the LTR unicode when the input is empty to prevent: Sending an empty message, bad function of metion suggestions (force option: always remove the unicode), or placeholder issues */
+const removeUnicodeLTRWhenEmpty = (newComment:string, newCommentConverted:string, force?:boolean) => {
+
+    const removeRegEx = new RegExp(`${CONST.UNICODE.LTR}`,'g')
+
+    const result = newComment.length <= 1 || force ? newCommentConverted.replace(removeRegEx, '') : newCommentConverted;
+    return result;
+}
+
+export {moveCursorToEndOfLine, removeUnicodeLTRWhenEmpty};
+
 export default convertToLTR;

src/libs/convertToLTR/index.ts

@@ -2,4 +2,13 @@ import ConvertToLTR from './types';
 
 const convertToLTR: ConvertToLTR = (text) => text;
 
+const moveCursorToEndOfLine = (commentLength: number, setSelection:(value: React.SetStateAction<{
+    start: number;
+    end: number;
+}>)=>void) => setSelection
+
+const removeUnicodeLTRWhenEmpty = (newComment:string) => newComment;
+
+export {moveCursorToEndOfLine, removeUnicodeLTRWhenEmpty};
+
 export default convertToLTR;

src/libs/convertToLTRForComposer/index.android.ts

@@ -1,8 +1,9 @@
+import CONST from '@src/CONST';
 import ConvertToLTRForComposer from './types';
 
 /**
  * Android only - Do not convert RTL text to a LTR text for input box using Unicode controls.
  * Android does not properly support bidirectional text for mixed content for input box
  */
-const convertToLTRForComposer: ConvertToLTRForComposer = (text) => text;
+const convertToLTRForComposer: ConvertToLTRForComposer = (text, isComposerEmpty) => (isComposerEmpty ? `${CONST.UNICODE.LTR}${text}` : text);
 export default convertToLTRForComposer;

src/libs/convertToLTRForComposer/types.ts

@@ -1,3 +1,3 @@
-type ConvertToLTRForComposer = (text: string) => string;
+type ConvertToLTRForComposer = (text: string, isComposerEmpty?: boolean) => string;
 
 export default ConvertToLTRForComposer;

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

@@ -14,6 +14,7 @@ import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import getDraftComment from '@libs/ComposerUtils/getDraftComment';
+import {moveCursorToEndOfLine, removeUnicodeLTRWhenEmpty} from '@libs/convertToLTR';
 import convertToLTRForComposer from '@libs/convertToLTRForComposer';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
@@ -105,6 +106,7 @@ function ComposerWithSuggestions({
     const styles = useThemeStyles();
     const {preferredLocale} = useLocalize();
     const isFocused = useIsFocused();
+    const [composerIsEmpty, setComposerIsEmpty] = useState(true);
     const navigation = useNavigation();
     const emojisPresentBefore = useRef([]);
     const [value, setValue] = useState(() => {
@@ -220,26 +222,45 @@ function ComposerWithSuggestions({
                     debouncedUpdateFrequentlyUsedEmojis();
                 }
             }
-            const newCommentConverted = convertToLTRForComposer(newComment);
+
+            let newCommentConverted = newComment;
+            const prevComment = commentRef.current;
+
+            // This prevent the double execution of setting input value that could affect the place holder and could send an empty message or draft messages in android
+            if (prevComment !== newComment) {
+                newCommentConverted = removeUnicodeLTRWhenEmpty(newComment, newCommentConverted);
+                newCommentConverted = convertToLTRForComposer(newCommentConverted, composerIsEmpty);
+                if (['@'].includes(newComment)) {
+                    newCommentConverted = removeUnicodeLTRWhenEmpty(newComment, newCommentConverted, true);
+                }
+                setValue(newCommentConverted);
+                moveCursorToEndOfLine(newComment.length, setSelection);
+                setComposerIsEmpty(false);
+            }
+
             const isNewCommentEmpty = !!newCommentConverted.match(/^(\s)*$/);
-            const isPrevCommentEmpty = !!commentRef.current.match(/^(\s)*$/);
+            const isPrevCommentEmpty = !!prevComment.match(/^(\s)*$/);
 
             /** Only update isCommentEmpty state if it's different from previous one */
             if (isNewCommentEmpty !== isPrevCommentEmpty) {
                 setIsCommentEmpty(isNewCommentEmpty);
+                if (isNewCommentEmpty) {
+                    setComposerIsEmpty(true);
+                }
             }
+
             emojisPresentBefore.current = emojis;
-            setValue(newCommentConverted);
+
             if (commentValue !== newComment) {
-                const position = Math.max(selection.end + (newComment.length - commentRef.current.length), cursorPosition || 0);
+                const position = Math.max(selection.end + (newComment.length - prevComment.length), cursorPosition || 0);
                 setSelection({
                     start: position,
                     end: position,
                 });
             }
 
             // Indicate that draft has been created.
-            if (commentRef.current.length === 0 && newCommentConverted.length !== 0) {
+            if (prevComment.length === 0 && newCommentConverted.length !== 0) {
                 Report.setReportWithDraft(reportID, true);
             }
 
@@ -268,6 +289,7 @@ function ComposerWithSuggestions({
             raiseIsScrollLikelyLayoutTriggered,
             debouncedSaveReportComment,
             selection.end,
+            composerIsEmpty,
         ],
     );