fix(Menu): handle pseudo-element bounds in trigger click detection

- Add getPseudoElementPadding utility to compute ::before/::after dimensions
- Refactor mouseup handler to check extended clickable area
- Update click detection logic to include pseudo-element padding
- Improve trigger bounds calculation for more accurate click handling

Fixes mui#1232 - Prevents menu from closing unexpectedly when clicking within
the pseudo-element extended area of the trigger.

packages/react/src/menu/trigger/useMenuTrigger.ts

@@ -61,6 +61,25 @@ export function useMenuTrigger(parameters: useMenuTrigger.Parameters): useMenuTr
 
             const doc = ownerDocument(event.currentTarget);
 
+            function getPseudoElementPadding(triggerRefElement: HTMLElement) {
+              const beforeStyles = window.getComputedStyle(triggerRefElement, '::before');
+              const afterStyles = window.getComputedStyle(triggerRefElement, '::after');
+
+              const hasPseudoElements =
+                beforeStyles.content !== 'none' || afterStyles.content !== 'none';
+
+              const padding = hasPseudoElements
+                ? Math.max(
+                    parseInt(beforeStyles.width || '0', 10),
+                    parseInt(afterStyles.width || '0', 10),
+                    parseInt(beforeStyles.height || '0', 10),
+                    parseInt(afterStyles.height || '0', 10),
+                  ) / 2
+                : 0;
+
+              return padding;
+            }
+
             function handleMouseUp(mouseEvent: MouseEvent) {
               if (!triggerRef.current) {
                 return;
@@ -71,18 +90,22 @@ export function useMenuTrigger(parameters: useMenuTrigger.Parameters): useMenuTr
 
               const mouseUpTarget = mouseEvent.target as Element | null;
 
-              const triggerRect = triggerRef.current.getBoundingClientRect();
+              if (
+                contains(triggerRef.current, mouseUpTarget) ||
+                contains(positionerRef.current, mouseUpTarget) ||
+                mouseUpTarget === triggerRef.current
+              ) {
+                return;
+              }
 
-              const isInsideTrigger =
-                mouseEvent.clientX >= triggerRect.left &&
-                mouseEvent.clientX <= triggerRect.right &&
-                mouseEvent.clientY >= triggerRect.top &&
-                mouseEvent.clientY <= triggerRect.bottom;
+              const padding = getPseudoElementPadding(triggerRef.current);
+              const triggerRect = triggerRef.current.getBoundingClientRect();
 
               if (
-                isInsideTrigger ||
-                contains(positionerRef.current, mouseUpTarget) ||
-                contains(triggerRef.current, mouseUpTarget)
+                mouseEvent.clientX >= triggerRect.left - padding &&
+                mouseEvent.clientX <= triggerRect.right + padding &&
+                mouseEvent.clientY >= triggerRect.top - padding &&
+                mouseEvent.clientY <= triggerRect.bottom + padding
               ) {
                 return;
               }