fix(explorer): let clicks through the context-menu overlay (#3278)

The MUI menu backdrop swallowed the first click, forcing an extra
dismiss click before selecting a file. The root overlay now has
pointer-events:none with the paper restored to auto (same trick as
HoverMenu), and a document pointerdown listener closes the menu on any
outside press — the same event still selects the file beneath.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
pull/3582/head
Tomas Dvorak 2 weeks ago
parent a9ed9ade1f
commit 5ecfd3e9f1

@ -1,5 +1,5 @@
import { Box, Divider, ListItemIcon, ListItemText, Menu, MenuItem, styled, Typography, useTheme } from "@mui/material"; import { Box, Divider, ListItemIcon, ListItemText, Menu, MenuItem, styled, Typography, useTheme } from "@mui/material";
import { useCallback, useMemo } from "react"; import { useCallback, useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { closeContextMenu } from "../../../redux/fileManagerSlice.ts"; import { closeContextMenu } from "../../../redux/fileManagerSlice.ts";
import { CreateNewDialogType } from "../../../redux/globalStateSlice.ts"; import { CreateNewDialogType } from "../../../redux/globalStateSlice.ts";
@ -107,6 +107,23 @@ const ContextMenu = ({ fmIndex = 0 }: ContextMenuProps) => {
dispatch(closeContextMenu({ index: fmIndex, value: undefined })); dispatch(closeContextMenu({ index: fmIndex, value: undefined }));
}, [dispatch]); }, [dispatch]);
// The menu overlay lets pointer events fall through to the file list, so
// dismiss it manually on any click outside the menu paper — the same event
// still reaches the file underneath (upstream #3278).
useEffect(() => {
if (!contextMenuOpen) {
return;
}
const onPointerDown = (e: PointerEvent) => {
if ((e.target as HTMLElement | null)?.closest?.(".MuiMenu-paper")) {
return;
}
dispatch(closeContextMenu({ index: fmIndex, value: undefined }));
};
document.addEventListener("pointerdown", onPointerDown, true);
return () => document.removeEventListener("pointerdown", onPointerDown, true);
}, [contextMenuOpen, dispatch, fmIndex]);
const showOpenWithCascading = displayOpt.showOpenWithCascading && displayOpt.showOpenWithCascading(); const showOpenWithCascading = displayOpt.showOpenWithCascading && displayOpt.showOpenWithCascading();
const showOpenWith = displayOpt.showOpenWith && displayOpt.showOpenWith(); const showOpenWith = displayOpt.showOpenWith && displayOpt.showOpenWith();
let part1 = let part1 =
@ -379,6 +396,14 @@ const ContextMenu = ({ fmIndex = 0 }: ContextMenuProps) => {
onClose={onClose} onClose={onClose}
disableAutoFocusItem disableAutoFocusItem
open={Boolean(contextMenuOpen)} open={Boolean(contextMenuOpen)}
style={{ pointerEvents: "none" }}
slotProps={{
paper: {
style: {
pointerEvents: "auto",
},
},
}}
anchorReference="anchorPosition" anchorReference="anchorPosition"
anchorPosition={{ anchorPosition={{
top: contextMenuPos?.y ?? 0, top: contextMenuPos?.y ?? 0,

Loading…
Cancel
Save