diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 8bfcbbeb779e..79230f4301c9 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -531,6 +531,18 @@ function MoneyRequestConfirmationList({ ], ); + const shouldDisableParticipant = (participant: Participant): boolean => { + if (ReportUtils.isDraftReport(participant.reportID)) { + return true; + } + + if (!participant.isInvoiceRoom && !participant.isPolicyExpenseChat && !participant.isSelfDM && ReportUtils.isOptimisticPersonalDetail(participant.accountID ?? -1)) { + return true; + } + + return false; + }; + const sections = useMemo(() => { const options: Array> = []; if (isTypeSplit) { @@ -553,7 +565,7 @@ function MoneyRequestConfirmationList({ const formattedSelectedParticipants = selectedParticipants.map((participant) => ({ ...participant, isSelected: false, - isDisabled: !participant.isInvoiceRoom && !participant.isPolicyExpenseChat && !participant.isSelfDM && ReportUtils.isOptimisticPersonalDetail(participant.accountID ?? -1), + isInteractive: !shouldDisableParticipant(participant), })); options.push({ title: translate('common.to'), diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx index 377007d40c54..5237ff486631 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx @@ -36,6 +36,7 @@ function GenericPressable( onPressOut, accessible = true, fullDisabled = false, + interactive = true, ...rest }: PressableProps, ref: PressableRef, @@ -67,6 +68,9 @@ function GenericPressable( * Returns the cursor style based on the state of Pressable */ const cursorStyle = useMemo(() => { + if (!interactive) { + return styles.cursorDefault; + } if (shouldUseDisabledCursor) { return styles.cursorDisabled; } @@ -74,7 +78,7 @@ function GenericPressable( return styles.cursorText; } return styles.cursorPointer; - }, [styles, shouldUseDisabledCursor, rest.accessibilityRole, rest.role]); + }, [styles, shouldUseDisabledCursor, rest.accessibilityRole, rest.role, interactive]); const onLongPressHandler = useCallback( (event: GestureResponderEvent) => { @@ -98,7 +102,7 @@ function GenericPressable( const onPressHandler = useCallback( (event?: GestureResponderEvent | KeyboardEvent) => { - if (isDisabled) { + if (isDisabled || !interactive) { return; } if (!onPress) { @@ -113,7 +117,7 @@ function GenericPressable( } return onPress(event); }, - [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled], + [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled, interactive], ); const voidOnPressHandler = useCallback( diff --git a/src/components/Pressable/GenericPressable/types.ts b/src/components/Pressable/GenericPressable/types.ts index 26a2fea42d94..61cb6db8ee76 100644 --- a/src/components/Pressable/GenericPressable/types.ts +++ b/src/components/Pressable/GenericPressable/types.ts @@ -142,6 +142,12 @@ type PressableProps = RNPressableProps & * Specifies if the pressable responder should be disabled */ fullDisabled?: boolean; + + /** + * Whether the menu item should be interactive at all + * e.g., show disabled cursor when disabled + */ + interactive?: boolean; }; type PressableRef = ForwardedRef; diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index c9dc773c8818..99330478c75f 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -82,6 +82,7 @@ function BaseListItem({ onSelectRow(item); }} disabled={isDisabled && !item.isSelected} + interactive={item.isInteractive} accessibilityLabel={item.text ?? ''} role={CONST.ROLE.BUTTON} hoverDimmingValue={1} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index fc369adf5169..31a4464cdc86 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -79,6 +79,9 @@ type ListItem = { /** Whether this option is disabled for selection */ isDisabled?: boolean | null; + /** Whether this item should be interactive at all */ + isInteractive?: boolean; + /** List title is bold by default. Use this props to customize it */ isBold?: boolean;