Merge pull request #42823 from dragnoir/41803-fix

Fix: intercept mouse selection when out of input field

Author: youssef-lr

src/components/MoneyRequestAmountInput.tsx

@@ -2,6 +2,7 @@ import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputSelectionChangeEventData, TextStyle, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import {useMouseContext} from '@hooks/useMouseContext';
 import * as Browser from '@libs/Browser';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
@@ -258,6 +259,16 @@ function MoneyRequestAmountInput(
 
     const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
 
+    const {setMouseDown, setMouseUp} = useMouseContext();
+    const handleMouseDown = (e: React.MouseEvent<Element, MouseEvent>) => {
+        e.stopPropagation();
+        setMouseDown();
+    };
+    const handleMouseUp = (e: React.MouseEvent<Element, MouseEvent>) => {
+        e.stopPropagation();
+        setMouseUp();
+    };
+
     return (
         <TextInputWithCurrencySymbol
             autoGrow={autoGrow}
@@ -298,7 +309,8 @@ function MoneyRequestAmountInput(
             touchableInputWrapperStyle={props.touchableInputWrapperStyle}
             maxLength={maxLength}
             hideFocusedState={hideFocusedState}
-            onMouseDown={(event) => event.stopPropagation()}
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
         />
     );
 }

src/components/MoneyRequestConfirmationList.tsx

@@ -9,6 +9,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
+import {MouseProvider} from '@hooks/useMouseContext';
 import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
@@ -1228,17 +1229,19 @@ function MoneyRequestConfirmationList({
     );
 
     return (
-        <SelectionList<MoneyRequestConfirmationListItem>
-            sections={sections}
-            ListItem={UserListItem}
-            onSelectRow={navigateToReportOrUserDetail}
-            shouldDebounceRowSelect
-            canSelectMultiple={false}
-            shouldPreventDefaultFocusOnSelectRow
-            footerContent={footerContent}
-            listFooterContent={listFooterContent}
-            containerStyle={[styles.flexBasisAuto]}
-        />
+        <MouseProvider>
+            <SelectionList<MoneyRequestConfirmationListItem>
+                sections={sections}
+                ListItem={UserListItem}
+                onSelectRow={navigateToReportOrUserDetail}
+                shouldDebounceRowSelect
+                canSelectMultiple={false}
+                shouldPreventDefaultFocusOnSelectRow
+                footerContent={footerContent}
+                listFooterContent={listFooterContent}
+                containerStyle={[styles.flexBasisAuto]}
+            />
+        </MouseProvider>
     );
 }
 

src/components/SelectionList/BaseListItem.tsx

@@ -5,6 +5,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useHover from '@hooks/useHover';
+import {useMouseContext} from '@hooks/useMouseContext';
 import useSyncFocus from '@hooks/useSyncFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -36,11 +37,16 @@ function BaseListItem<TItem extends ListItem>({
     const theme = useTheme();
     const styles = useThemeStyles();
     const {hovered, bind} = useHover();
+    const {isMouseDownOnInput, setMouseUp} = useMouseContext();
 
     const pressableRef = useRef<View>(null);
 
     // Sync focus on an item
     useSyncFocus(pressableRef, Boolean(isFocused), shouldSyncFocus);
+    const handleMouseUp = (e: React.MouseEvent<Element, MouseEvent>) => {
+        e.stopPropagation();
+        setMouseUp();
+    };
 
     const rightHandSideComponentRender = () => {
         if (canSelectMultiple || !rightHandSideComponent) {
@@ -67,6 +73,10 @@ function BaseListItem<TItem extends ListItem>({
                 {...bind}
                 ref={pressableRef}
                 onPress={(e) => {
+                    if (isMouseDownOnInput) {
+                        e?.stopPropagation(); // Preventing the click action
+                        return;
+                    }
                     if (shouldPreventEnterKeySubmit && e && 'key' in e && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
                         return;
                     }
@@ -82,6 +92,8 @@ function BaseListItem<TItem extends ListItem>({
                 id={keyForList ?? ''}
                 style={pressableStyle}
                 onFocus={onFocus}
+                onMouseUp={handleMouseUp}
+                onMouseLeave={handleMouseUp}
                 tabIndex={item.tabIndex}
             >
                 <View style={wrapperStyle}>

src/components/TextInputWithCurrencySymbol/types.ts

@@ -37,6 +37,11 @@ type TextInputWithCurrencySymbolProps = {
      */
     onMouseDown?: ((e: React.MouseEvent) => void) | undefined;
 
+    /**
+     * Callback that is called when the text input is pressed up
+     */
+    onMouseUp?: ((e: React.MouseEvent) => void) | undefined;
+
     /** Whether the currency symbol is pressable */
     isCurrencyPressable: boolean;
 

src/hooks/useMouseContext.tsx

@@ -0,0 +1,33 @@
+import type {ReactNode} from 'react';
+import React, {createContext, useContext, useMemo, useState} from 'react';
+
+type MouseContextProps = {
+    isMouseDownOnInput: boolean;
+    setMouseDown: () => void;
+    setMouseUp: () => void;
+};
+
+const MouseContext = createContext<MouseContextProps>({
+    isMouseDownOnInput: false,
+    setMouseDown: () => {},
+    setMouseUp: () => {},
+});
+
+type MouseProviderProps = {
+    children: ReactNode;
+};
+
+function MouseProvider({children}: MouseProviderProps) {
+    const [isMouseDownOnInput, setIsMouseDownOnInput] = useState(false);
+
+    const setMouseDown = () => setIsMouseDownOnInput(true);
+    const setMouseUp = () => setIsMouseDownOnInput(false);
+
+    const value = useMemo(() => ({isMouseDownOnInput, setMouseDown, setMouseUp}), [isMouseDownOnInput]);
+
+    return <MouseContext.Provider value={value}>{children}</MouseContext.Provider>;
+}
+
+const useMouseContext = () => useContext(MouseContext);
+
+export {MouseProvider, useMouseContext};