Merge pull request #42158 from bernhardoj/fix/41762-wrong-selection-v…

…alue-after-replacing-split-value

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

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;