diff --git a/src/components/Modal/BottomDockedModal/Backdrop/index.web.tsx b/src/components/Modal/BottomDockedModal/Backdrop/index.web.tsx index d219da8f4a3a..eae0640cd8cc 100644 --- a/src/components/Modal/BottomDockedModal/Backdrop/index.web.tsx +++ b/src/components/Modal/BottomDockedModal/Backdrop/index.web.tsx @@ -54,17 +54,19 @@ function Backdrop({ if (!customBackdrop) { return ( - - - + + + + ); } diff --git a/src/components/Modal/BottomDockedModal/Container/index.web.tsx b/src/components/Modal/BottomDockedModal/Container/index.web.tsx index ca24af45f5e3..86789e32d7cf 100644 --- a/src/components/Modal/BottomDockedModal/Container/index.web.tsx +++ b/src/components/Modal/BottomDockedModal/Container/index.web.tsx @@ -12,9 +12,7 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on const isInitiated = useSharedValue(false); useEffect( - () => () => { - setTimeout(onCloseCallBack, animationOutTiming); - }, + () => () => onCloseCallBack(), // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); @@ -53,16 +51,12 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on return ( - - {props.children} - + {props.children} ); } diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index cd38dbd67be0..78f0094a8611 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -37,7 +37,6 @@ function BottomDockedModal({ ...props }: ModalProps) { const [isVisibleState, setIsVisibleState] = useState(isVisible); - const [isContainerOpen, setIsContainerOpen] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [deviceWidth, setDeviceWidth] = useState(() => Dimensions.get('window').width); const [deviceHeight, setDeviceHeight] = useState(() => Dimensions.get('window').height); @@ -104,28 +103,27 @@ function BottomDockedModal({ onModalWillHide(); setIsVisibleState(false); - setIsContainerOpen(false); }, // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps [], ); useEffect(() => { - if (isVisible && !isContainerOpen && !isTransitioning) { + if (isVisible && !isVisibleState && !isTransitioning) { handleRef.current = InteractionManager.createInteractionHandle(); onModalWillShow(); setIsVisibleState(true); setIsTransitioning(true); - } else if (!isVisible && isContainerOpen && !isTransitioning) { + } else if (!isVisible && isVisibleState && !isTransitioning) { handleRef.current = InteractionManager.createInteractionHandle(); onModalWillHide(); - - setIsVisibleState(false); setIsTransitioning(true); + } else if (!isVisible && isVisibleState && isTransitioning) { + setIsVisibleState(false); } // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, [isVisible, isContainerOpen, isTransitioning]); + }, [isVisible, isTransitioning, isVisibleState]); const backdropStyle: ViewStyle = useMemo(() => { return { @@ -137,7 +135,6 @@ function BottomDockedModal({ const onOpenCallBack = useCallback(() => { setIsTransitioning(false); - setIsContainerOpen(true); if (handleRef.current) { InteractionManager.clearInteractionHandle(handleRef.current); } @@ -146,7 +143,6 @@ function BottomDockedModal({ const onCloseCallBack = useCallback(() => { setIsTransitioning(false); - setIsContainerOpen(false); if (handleRef.current) { InteractionManager.clearInteractionHandle(handleRef.current); } @@ -187,12 +183,10 @@ function BottomDockedModal({ pointerEvents="box-none" style={[styles.modalBackdrop, styles.modalContainerBox]} > - {isVisibleState && ( - <> - {hasBackdrop && backdropView} - {containerView} - - )} + <> + {hasBackdrop && backdropView} + {containerView} + ); } @@ -203,7 +197,7 @@ function BottomDockedModal({ transparent animationType="none" // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - visible={isVisibleState || isTransitioning || isContainerOpen !== isVisibleState} + visible={isVisibleState || isTransitioning} onRequestClose={onBackButtonPress} statusBarTranslucent={statusBarTranslucent} testID={testID} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 1354ff233bfe..50f7dfb1b4f7 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -21,7 +21,9 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; +import ControlSelection from '@libs/ControlSelection'; import {convertToDisplayString} from '@libs/CurrencyUtils'; +import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils'; @@ -250,6 +252,8 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions, id={transaction.transactionID} style={[pressableStyle]} onMouseLeave={handleMouseLeave} + onPressIn={() => canUseTouchScreen() && ControlSelection.block()} + onPressOut={() => ControlSelection.unblock()} onLongPress={() => { if (!shouldUseNarrowLayout) { return; @@ -313,6 +317,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions, type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED} onClose={() => setIsModalVisible(false)} shouldPreventScrollOnFocus + shouldUseNewModal >