[Menu, Popover, PreviewCard] Set pointer events style on backdrops wh…

…en hoverable
mui · Jan 23, 2025 · 199bf89 · 199bf89
1 parent 140263d
commit 199bf89
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/packages/react/src/menu/backdrop/MenuBackdrop.tsx b/packages/react/src/menu/backdrop/MenuBackdrop.tsx
@@ -8,6 +8,7 @@ import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 
 const customStyleHookMapping: CustomStyleHookMapping<MenuBackdrop.State> = {
   ...baseMapping,
@@ -25,7 +26,7 @@ const MenuBackdrop = React.forwardRef(function MenuBackdrop(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { className, render, ...other } = props;
-  const { open, mounted, transitionStatus } = useMenuRootContext();
+  const { open, mounted, transitionStatus, openReason } = useMenuRootContext();
 
   const state: MenuBackdrop.State = React.useMemo(
     () => ({
@@ -40,7 +41,11 @@ const MenuBackdrop = React.forwardRef(function MenuBackdrop(
     className,
     state,
     ref: forwardedRef,
-    extraProps: { role: 'presentation', hidden: !mounted, ...other },
+    extraProps: mergeReactProps<'div'>(other, {
+      role: 'presentation',
+      hidden: !mounted,
+      style: openReason === 'hover' ? { pointerEvents: 'none' } : {},
+    }),
     customStyleHookMapping,
   });
 

diff --git a/packages/react/src/popover/backdrop/PopoverBackdrop.tsx b/packages/react/src/popover/backdrop/PopoverBackdrop.tsx
@@ -8,6 +8,7 @@ import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 
 const customStyleHookMapping: CustomStyleHookMapping<PopoverBackdrop.State> = {
   ...baseMapping,
@@ -26,7 +27,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
 ) {
   const { className, render, ...other } = props;
 
-  const { open, mounted, transitionStatus } = usePopoverRootContext();
+  const { open, mounted, transitionStatus, openReason } = usePopoverRootContext();
 
   const state: PopoverBackdrop.State = React.useMemo(
     () => ({
@@ -41,7 +42,11 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
     className,
     state,
     ref: forwardedRef,
-    extraProps: { role: 'presentation', hidden: !mounted, ...other },
+    extraProps: mergeReactProps<'div'>(other, {
+      role: 'presentation',
+      hidden: !mounted,
+      style: openReason === 'hover' ? { pointerEvents: 'none' } : {},
+    }),
     customStyleHookMapping,
   });
 

diff --git a/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx b/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx
@@ -8,6 +8,7 @@ import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 
 const customStyleHookMapping: CustomStyleHookMapping<PreviewCardBackdrop.State> = {
   ...baseMapping,
@@ -41,7 +42,13 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop(
     className,
     state,
     ref: forwardedRef,
-    extraProps: { role: 'presentation', hidden: !mounted, ...other },
+    extraProps: mergeReactProps<'div'>(other, {
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        pointerEvents: 'none',
+      },
+    }),
     customStyleHookMapping,
   });