Merge pull request #42158 from bernhardoj/fix/41762-wrong-selection-value-after-replacing-split-value

Fix cursor appears in front of digit when highlighting amount and entering digit

Author: youssef-lr

src/components/MoneyRequestAmountInput.tsx

@@ -7,6 +7,7 @@ import * as Browser from '@libs/Browser';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
+import shouldIgnoreSelectionWhenUpdatedManually from '@libs/shouldIgnoreSelectionWhenUpdatedManually';
 import CONST from '@src/CONST';
 import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
@@ -140,6 +141,8 @@ function MoneyRequestAmountInput(
     });
 
     const forwardDeletePressedRef = useRef(false);
+    // The ref is used to ignore any onSelectionChange event that happens while we are updating the selection manually in setNewAmount
+    const willSelectionBeUpdatedManually = useRef(false);
 
     /**
      * Sets the selection and the amount accordingly to the value passed to the input
@@ -162,13 +165,15 @@ function MoneyRequestAmountInput(
 
             // setCurrentAmount contains another setState(setSelection) making it error-prone since it is leading to setSelection being called twice for a single setCurrentAmount call. This solution introducing the hasSelectionBeenSet flag was chosen for its simplicity and lower risk of future errors https://github.com/Expensify/App/issues/23300#issuecomment-1766314724.
 
+            willSelectionBeUpdatedManually.current = true;
             let hasSelectionBeenSet = false;
             setCurrentAmount((prevAmount) => {
                 const strippedAmount = MoneyRequestUtils.stripCommaFromAmount(finalAmount);
                 const isForwardDelete = prevAmount.length > strippedAmount.length && forwardDeletePressedRef.current;
                 if (!hasSelectionBeenSet) {
                     hasSelectionBeenSet = true;
                     setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? strippedAmount.length : prevAmount.length, strippedAmount.length));
+                    willSelectionBeUpdatedManually.current = false;
                 }
                 onAmountChange?.(strippedAmount);
                 return strippedAmount;
@@ -294,6 +299,10 @@ function MoneyRequestAmountInput(
             selectedCurrencyCode={currency}
             selection={selection}
             onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+                if (shouldIgnoreSelectionWhenUpdatedManually && willSelectionBeUpdatedManually.current) {
+                    willSelectionBeUpdatedManually.current = false;
+                    return;
+                }
                 if (!shouldUpdateSelection) {
                     return;
                 }

src/libs/shouldIgnoreSelectionWhenUpdatedManually/index.android.tsx

@@ -0,0 +1,5 @@
+import type ShouldIgnoreSelectionWhenUpdatedManually from './types';
+
+const shouldIgnoreSelectionWhenUpdatedManually: ShouldIgnoreSelectionWhenUpdatedManually = true;
+
+export default shouldIgnoreSelectionWhenUpdatedManually;

src/libs/shouldIgnoreSelectionWhenUpdatedManually/index.tsx

@@ -0,0 +1,5 @@
+import type ShouldIgnoreSelectionWhenUpdatedManually from './types';
+
+const shouldIgnoreSelectionWhenUpdatedManually: ShouldIgnoreSelectionWhenUpdatedManually = false;
+
+export default shouldIgnoreSelectionWhenUpdatedManually;

src/libs/shouldIgnoreSelectionWhenUpdatedManually/types.ts

@@ -0,0 +1,3 @@
+type ShouldIgnoreSelectionWhenUpdatedManually = boolean;
+
+export default ShouldIgnoreSelectionWhenUpdatedManually;