[Backdrops] Fix text selection & right-clicks

packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx

@@ -9,6 +9,7 @@ import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
 import { useForkRef } from '../../utils/useForkRef';
+import { mergeProps } from '../../merge-props';
 
 const customStyleHookMapping: CustomStyleHookMapping<AlertDialogBackdrop.State> = {
   ...baseMapping,
@@ -43,11 +44,17 @@ const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop(
     className,
     state,
     ref: mergedRef,
-    extraProps: {
-      role: 'presentation',
-      hidden: !mounted,
-      ...other,
-    },
+    extraProps: mergeProps(
+      {
+        role: 'presentation',
+        hidden: !mounted,
+        style: {
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+        },
+      },
+      other,
+    ),
     customStyleHookMapping,
   });
 

packages/react/src/dialog/backdrop/DialogBackdrop.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDialogRootContext } from '../root/DialogRootContext';
+import { mergeProps } from '../../merge-props';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { type TransitionStatus } from '../../utils/useTransitionStatus';
 import { type BaseUIComponentProps } from '../../utils/types';
@@ -43,11 +44,17 @@ const DialogBackdrop = React.forwardRef(function DialogBackdrop(
     className,
     state,
     ref: mergedRef,
-    extraProps: {
-      role: 'presentation',
-      hidden: !mounted,
-      ...other,
-    },
+    extraProps: mergeProps(
+      {
+        role: 'presentation',
+        hidden: !mounted,
+        style: {
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+        },
+      },
+      other,
+    ),
     customStyleHookMapping,
   });
 

packages/react/src/dialog/root/DialogRoot.test.tsx

@@ -192,6 +192,27 @@ describe('<Dialog.Root />', () => {
         expect(handleOpenChange.callCount).to.equal(1);
         expect(handleOpenChange.firstCall.args[2]).to.equal('outside-press');
       });
+
+      it('does not change open state on non-main button clicks', async () => {
+        const handleOpenChange = spy();
+
+        const { user } = await render(
+          <Dialog.Root defaultOpen onOpenChange={handleOpenChange}>
+            <Dialog.Trigger>Open</Dialog.Trigger>
+            <Dialog.Portal>
+              <Dialog.Backdrop data-backdrop style={{ position: 'fixed', zIndex: 10, inset: 0 }} />
+              <Dialog.Popup style={{ position: 'fixed', zIndex: 10 }}>
+                <Dialog.Close>Close</Dialog.Close>
+              </Dialog.Popup>
+            </Dialog.Portal>
+          </Dialog.Root>,
+        );
+
+        const backdrop = document.querySelector('[data-backdrop]') as HTMLElement;
+        await user.pointer([{ target: backdrop }, { keys: '[MouseRight]', target: backdrop }]);
+
+        expect(handleOpenChange.callCount).to.equal(0);
+      });
     });
   });
 

packages/react/src/dialog/root/useDialogRoot.ts

@@ -109,6 +109,9 @@ export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.R
   const dismiss = useDismiss(context, {
     outsidePressEvent: 'mousedown',
     outsidePress(event) {
+      if (event.button !== 0) {
+        return false;
+      }
       const target = getTarget(event) as Element | null;
       if (isTopmost && dismissible) {
         const backdrop = target as HTMLDivElement | null;

packages/react/src/menu/backdrop/MenuBackdrop.tsx

@@ -45,7 +45,11 @@ const MenuBackdrop = React.forwardRef(function MenuBackdrop(
       {
         role: 'presentation',
         hidden: !mounted,
-        style: openReason === 'hover' ? { pointerEvents: 'none' } : {},
+        style: {
+          pointerEvents: openReason === 'hover' ? 'none' : undefined,
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+        },
       },
       other,
     ),

packages/react/src/popover/backdrop/PopoverBackdrop.tsx

@@ -43,7 +43,11 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
       {
         role: 'presentation',
         hidden: !mounted,
-        style: openReason === 'hover' ? { pointerEvents: 'none' } : {},
+        style: {
+          pointerEvents: openReason === 'hover' ? 'none' : undefined,
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+        },
       },
       elementProps,
     ],

packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx

@@ -48,6 +48,8 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop(
         hidden: !mounted,
         style: {
           pointerEvents: 'none',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
         },
       },
       other,

packages/react/src/select/backdrop/SelectBackdrop.tsx

@@ -8,6 +8,7 @@ import { popupStateMapping } from '../../utils/popupStateMapping';
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import { mergeProps } from '../../merge-props';
 
 const customStyleHookMapping: CustomStyleHookMapping<SelectBackdrop.State> = {
   ...popupStateMapping,
@@ -38,7 +39,17 @@ const SelectBackdrop = React.forwardRef(function SelectBackdrop(
     className,
     state,
     ref: forwardedRef,
-    extraProps: { role: 'presentation', hidden: !mounted, ...other },
+    extraProps: mergeProps(
+      {
+        role: 'presentation',
+        hidden: !mounted,
+        style: {
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+        },
+      },
+      other,
+    ),
     customStyleHookMapping,
   });
 

packages/react/src/utils/InternalBackdrop.tsx

@@ -19,6 +19,8 @@ const InternalBackdrop = React.forwardRef(function InternalBackdrop(
       style={{
         position: 'fixed',
         inset: 0,
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
       }}
     />
   );