[ BUG ] Clicking outside the Dialog modal on mobile web doesn't close dialog

[ferntheplant]

Describe the bug Clicking outside the Dialog modal on mobile web doesn't close dialog

To Reproduce Go to the showcase and set your screen size to iPhone 14 Pro Max. Open the "edit profie" dialong and try to close it by clicking outside the modal

Expected behavior Clicking outside the modal should close it - see shadcn on the same mobile sized screen

Platform (please complete the following information):

• Type: desktop
• OS: MacOS
• Browser Chrome, Firefox

[muneer-abdulsattar]

this is correct and it's annoying i kept trying stuff but for now i will be using this approache

const DialogOverlayWeb = React.forwardRef<
	React.ElementRef<typeof DialogPrimitive.Overlay>,
	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => {
	const { open, onOpenChange } = DialogPrimitive.useRootContext();

	// Function to handle press events on the overlay
	const handlePress = (event: GestureResponderEvent) => {
		// Get the target element from the event
		const target = event.target;
		const currentTarget = event.currentTarget;

		// If target === currentTarget, the press was directly on the overlay
		// If they're different, the press was on a child element
		if (target === currentTarget) {
			// Close the dialog
			onOpenChange(false);
		}
	};

	return (
		<DialogPrimitive.Overlay
			style={StyleSheet.absoluteFill}
			className={cn(
				"z-50 bg-black/80 flex justify-center items-center p-2",
				open
					? "web:animate-in web:fade-in-0"
					: "web:animate-out web:fade-out-0",
				className,
			)}
			{...props}
			ref={ref}
			onPress={handlePress}
		/>
	);
});

hopefully they fix it same thing happens with select but the select has been solved but can't use the same solution for the dialog dialog

[MJRT]

+1

The issue is easily reproducible using F12 device emulation on the RNR Demo.

by the way, the onInteractOutside and onPointerDownOutside events are not being triggered in my case.

However, Radix does not exhibit this problem—it handles the case correctly. See: Radix Dialog Docs.