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
>