Fix current selection for web TextInputWithCurrencySymbol

src/components/AmountForm.tsx

@@ -1,6 +1,6 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
+import type {NativeSyntheticEvent} from 'react-native';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -16,7 +16,7 @@ import TextInput from './TextInput';
 import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused';
 import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol';
-import type TextInputWithCurrencySymbolProps from './TextInputWithCurrencySymbol/types';
+import type BaseTextInputWithCurrencySymbolProps from './TextInputWithCurrencySymbol/types';
 
 type AmountFormProps = {
     /** Amount supplied by the FormProvider */
@@ -51,7 +51,7 @@ type AmountFormProps = {
 
     /** Number of decimals to display */
     fixedDecimals?: number;
-} & Pick<TextInputWithCurrencySymbolProps, 'hideCurrencySymbol' | 'extraSymbol'> &
+} & Pick<BaseTextInputWithCurrencySymbolProps, 'hideCurrencySymbol' | 'extraSymbol'> &
     Pick<BaseTextInputProps, 'autoFocus'>;
 
 /**
@@ -292,11 +292,11 @@ function AmountForm(
                     }}
                     selectedCurrencyCode={currency}
                     selection={selection}
-                    onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+                    onSelectionChange={(start, end) => {
                         if (!shouldUpdateSelection) {
                             return;
                         }
-                        setSelection(e.nativeEvent.selection);
+                        setSelection({start, end});
                     }}
                     onKeyPress={textInputKeyPress}
                     isCurrencyPressable={isCurrencyPressable}

src/components/MoneyRequestAmountInput.tsx

@@ -1,6 +1,6 @@
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import type {NativeSyntheticEvent, StyleProp, TextInputSelectionChangeEventData, TextStyle, ViewStyle} from 'react-native';
+import type {NativeSyntheticEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import {useMouseContext} from '@hooks/useMouseContext';
 import * as Browser from '@libs/Browser';
@@ -308,7 +308,7 @@ function MoneyRequestAmountInput(
             }}
             selectedCurrencyCode={currency}
             selection={selection}
-            onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+            onSelectionChange={(selectionStart, selectionEnd) => {
                 if (shouldIgnoreSelectionWhenUpdatedManually && willSelectionBeUpdatedManually.current) {
                     willSelectionBeUpdatedManually.current = false;
                     return;
@@ -320,8 +320,8 @@ function MoneyRequestAmountInput(
                 // When the amount is updated in setNewAmount on iOS, in onSelectionChange formattedAmount stores the value before the update. Using amountRef allows us to read the updated value
                 const maxSelection = amountRef.current?.length ?? formattedAmount.length;
                 amountRef.current = undefined;
-                const start = Math.min(e.nativeEvent.selection.start, maxSelection);
-                const end = Math.min(e.nativeEvent.selection.end, maxSelection);
+                const start = Math.min(selectionStart, maxSelection);
+                const end = Math.min(selectionEnd, maxSelection);
                 setSelection({start, end});
             }}
             onKeyPress={textInputKeyPress}

src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

@@ -7,7 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types';
-import type TextInputWithCurrencySymbolProps from './types';
+import type BaseTextInputWithCurrencySymbolProps from './types';
 
 function BaseTextInputWithCurrencySymbol(
     {
@@ -24,7 +24,7 @@ function BaseTextInputWithCurrencySymbol(
         extraSymbol,
         style,
         ...rest
-    }: TextInputWithCurrencySymbolProps,
+    }: BaseTextInputWithCurrencySymbolProps,
     ref: React.ForwardedRef<BaseTextInputRef>,
 ) {
     const {fromLocaleDigit} = useLocalize();

src/components/TextInputWithCurrencySymbol/index.android.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
 import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types';
 import BaseTextInputWithCurrencySymbol from './BaseTextInputWithCurrencySymbol';
-import type TextInputWithCurrencySymbolProps from './types';
+import type {TextInputWithCurrencySymbolProps} from './types';
 
 function TextInputWithCurrencySymbol({onSelectionChange = () => {}, ...props}: TextInputWithCurrencySymbolProps, ref: React.ForwardedRef<BaseTextInputRef>) {
     const [skipNextSelectionChange, setSkipNextSelectionChange] = useState(false);
@@ -21,7 +21,7 @@ function TextInputWithCurrencySymbol({onSelectionChange = () => {}, ...props}: T
                     setSkipNextSelectionChange(false);
                     return;
                 }
-                onSelectionChange(event);
+                onSelectionChange(event.nativeEvent.selection.start, event.nativeEvent.selection.end);
             }}
         />
     );

src/components/TextInputWithCurrencySymbol/index.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
+import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
 import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types';
 import BaseTextInputWithCurrencySymbol from './BaseTextInputWithCurrencySymbol';
-import type TextInputWithCurrencySymbolProps from './types';
+import type {TextInputWithCurrencySymbolProps} from './types';
 
-function TextInputWithCurrencySymbol(props: TextInputWithCurrencySymbolProps, ref: React.ForwardedRef<BaseTextInputRef>) {
+function TextInputWithCurrencySymbol({onSelectionChange = () => {}, ...props}: TextInputWithCurrencySymbolProps, ref: React.ForwardedRef<BaseTextInputRef>) {
     return (
         <BaseTextInputWithCurrencySymbol
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
+            onSelectionChange={(event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+                onSelectionChange(event.nativeEvent.selection.start, event.nativeEvent.selection.end);
+            }}
         />
     );
 }

src/components/TextInputWithCurrencySymbol/index.web.tsx

@@ -0,0 +1,42 @@
+import React, {useRef} from 'react';
+import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
+import BaseTextInputWithCurrencySymbol from './BaseTextInputWithCurrencySymbol';
+import type {TextInputWithCurrencySymbolProps} from './types';
+
+function TextInputWithCurrencySymbol({onSelectionChange = () => {}, ...props}: TextInputWithCurrencySymbolProps, ref: React.ForwardedRef<HTMLFormElement>) {
+    const textInputRef = useRef<HTMLFormElement | null>(null);
+
+    return (
+        <BaseTextInputWithCurrencySymbol
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={(element) => {
+                textInputRef.current = element as HTMLFormElement;
+
+                if (!ref) {
+                    return;
+                }
+
+                if (typeof ref === 'function') {
+                    ref(element as HTMLFormElement);
+                    return;
+                }
+
+                // eslint-disable-next-line no-param-reassign
+                ref.current = element as HTMLFormElement;
+            }}
+            onSelectionChange={(event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+                onSelectionChange(event.nativeEvent.selection.start, event.nativeEvent.selection.end);
+            }}
+            onPress={() => {
+                const selectionStart = (textInputRef.current?.selectionStart as number) ?? 0;
+                const selectionEnd = (textInputRef.current?.selectionEnd as number) ?? 0;
+                onSelectionChange(selectionStart, selectionEnd);
+            }}
+        />
+    );
+}
+
+TextInputWithCurrencySymbol.displayName = 'TextInputWithCurrencySymbol';
+
+export default React.forwardRef(TextInputWithCurrencySymbol);

src/components/TextInputWithCurrencySymbol/types.ts

@@ -2,7 +2,7 @@ import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInput
 import type {TextSelection} from '@components/Composer/types';
 import type {BaseTextInputProps} from '@components/TextInput/BaseTextInput/types';
 
-type TextInputWithCurrencySymbolProps = {
+type BaseTextInputWithCurrencySymbolProps = {
     /** Formatted amount in local currency  */
     formattedAmount: string;
 
@@ -77,6 +77,12 @@ type TextInputWithCurrencySymbolProps = {
 
     /** Hide the focus styles on TextInput */
     hideFocusedState?: boolean;
-} & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrow' | 'contentWidth' | 'regex'>;
+} & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrow' | 'contentWidth' | 'regex' | 'onPress'>;
 
-export default TextInputWithCurrencySymbolProps;
+type TextInputWithCurrencySymbolProps = Omit<BaseTextInputWithCurrencySymbolProps, 'onSelectionChange'> & {
+    onSelectionChange?: (start: number, end: number) => void;
+};
+
+export type {TextInputWithCurrencySymbolProps};
+
+export default BaseTextInputWithCurrencySymbolProps;