From f443c9e9f308e747dd07537cadedf1f9c0ef47c1 Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Sat, 30 Mar 2024 10:07:16 +0530
Subject: [PATCH] fix: When amount is highlighted, clicking on the page does
 not deselect the text.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/AmountForm.tsx                 |  6 +++++
 .../iou/steps/MoneyRequestAmountForm.tsx      | 22 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx
index e947c74f7c60..3c255bb5f482 100644
--- a/src/components/AmountForm.tsx
+++ b/src/components/AmountForm.tsx
@@ -84,7 +84,13 @@ function AmountForm(
         if (!ids.includes(relatedTargetId)) {
             return;
         }
+
         event.preventDefault();
+        setSelection({
+            start: selection.end,
+            end: selection.end,
+        });
+
         if (!textInput.current) {
             return;
         }
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.tsx b/src/pages/iou/steps/MoneyRequestAmountForm.tsx
index a010e13ff496..895497a747e8 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.tsx
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.tsx
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/core';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
@@ -8,6 +9,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import ScrollView from '@components/ScrollView';
 import TextInputWithCurrencySymbol from '@components/TextInputWithCurrencySymbol';
 import useLocalize from '@hooks/useLocalize';
+import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
@@ -91,6 +93,9 @@ function MoneyRequestAmountForm(
     const [formError, setFormError] = useState<MaybePhraseKey>('');
     const [shouldUpdateSelection, setShouldUpdateSelection] = useState(true);
 
+    const isFocused = useIsFocused();
+    const wasFocused = usePrevious(isFocused);
+
     const [selection, setSelection] = useState({
         start: selectedAmountAsString.length,
         end: selectedAmountAsString.length,
@@ -110,6 +115,11 @@ function MoneyRequestAmountForm(
         }
 
         event.preventDefault();
+        setSelection({
+            start: selection.end,
+            end: selection.end,
+        });
+
         if (!textInput.current) {
             return;
         }
@@ -185,6 +195,18 @@ function MoneyRequestAmountForm(
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [setNewAmount]);
 
+    // Removes text selection if user visits currency selector with selection and comes back
+    useEffect(() => {
+        if (!isFocused || wasFocused) {
+            return;
+        }
+
+        setSelection({
+            start: selection.end,
+            end: selection.end,
+        });
+    }, [selection.end, isFocused, selection, wasFocused]);
+
     /**
      * Update amount with number or Backspace pressed for BigNumberPad.
      * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit to enable Next button