diff --git a/.changeset/nine-yaks-tap.md b/.changeset/nine-yaks-tap.md new file mode 100644 index 000000000..370deaa8e --- /dev/null +++ b/.changeset/nine-yaks-tap.md @@ -0,0 +1,5 @@ +--- +'@radix-ui/react-dialog': patch +--- + +Stop event propagation to avoid unintended side effects. diff --git a/context7.json b/context7.json index 23d262a59..1e5263aba 100644 --- a/context7.json +++ b/context7.json @@ -1,4 +1,4 @@ { "url": "https://context7.com/radix-ui/primitives", "public_key": "pk_q7NnKuFFXMWA7WnmjMHQU" -} \ No newline at end of file +} diff --git a/packages/react/dialog/src/dialog.tsx b/packages/react/dialog/src/dialog.tsx index dbbaa4126..6d24553e1 100644 --- a/packages/react/dialog/src/dialog.tsx +++ b/packages/react/dialog/src/dialog.tsx @@ -33,7 +33,7 @@ type DialogContextValue = { descriptionId: string; open: boolean; onOpenChange(open: boolean): void; - onOpenToggle(): void; + onOpenToggle(event: React.MouseEvent): void; modal: boolean; }; @@ -75,7 +75,13 @@ const Dialog: React.FC = (props: ScopedProps) => { descriptionId={useId()} open={open} onOpenChange={setOpen} - onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])} + onOpenToggle={React.useCallback( + (e) => { + e.stopPropagation(); + setOpen((prevOpen) => !prevOpen); + }, + [setOpen], + )} modal={modal} > {children} @@ -278,9 +284,11 @@ const DialogContentModal = React.forwardRef { event.preventDefault(); + event.stopPropagation(); context.triggerRef.current?.focus(); })} onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => { + event.stopPropagation(); const originalEvent = event.detail.originalEvent; const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true; const isRightClick = originalEvent.button === 2 || ctrlLeftClick; @@ -291,9 +299,10 @@ const DialogContentModal = React.forwardRef - event.preventDefault(), - )} + onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => { + event.preventDefault(); + event.stopPropagation(); + })} /> ); }, @@ -481,7 +490,10 @@ const DialogClose = React.forwardRef( type="button" {...closeProps} ref={forwardedRef} - onClick={composeEventHandlers(props.onClick, () => context.onOpenChange(false))} + onClick={composeEventHandlers(props.onClick, (event) => { + event.stopPropagation(); + context.onOpenChange(false); + })} /> ); },