sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-07 06:23:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): escape on dirty property options triggers discard prompt

Browse Source
This commit is contained in:
Philipinho
2026-04-18 20:39:02 +01:00
parent 97cd88405d
commit b88c060df8
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/components/grid/grid-header-cell.tsx
+11 -6
View File
@@ -5,7 +5,7 @@ import { CSS } from "@dnd-kit/utilities";
import { Popover } from "@mantine/core"; import { Popover } from "@mantine/core";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types"; import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types";
import { activePropertyMenuAtom, propertyMenuDirtyAtom, editingCellAtom } from "@/features/base/atoms/base-atoms"; import { activePropertyMenuAtom, propertyMenuDirtyAtom, propertyMenuCloseRequestAtom, editingCellAtom } from "@/features/base/atoms/base-atoms";
import { import {
IconLetterT, IconLetterT,
IconHash, IconHash,
@@ -66,6 +66,7 @@ export const GridHeaderCell = memo(function GridHeaderCell({
const menuOpened = activePropertyMenu === header.column.id; const menuOpened = activePropertyMenu === header.column.id;
const cellRef = useRef<HTMLDivElement>(null); const cellRef = useRef<HTMLDivElement>(null);
const [propertyMenuDirty, setPropertyMenuDirty] = useAtom(propertyMenuDirtyAtom) as unknown as [boolean, (val: boolean) => void]; const [propertyMenuDirty, setPropertyMenuDirty] = useAtom(propertyMenuDirtyAtom) as unknown as [boolean, (val: boolean) => void];
const [closeRequest, setCloseRequest] = useAtom(propertyMenuCloseRequestAtom) as unknown as [number, (val: number) => void];
const [, setEditingCell] = useAtom(editingCellAtom) as unknown as [EditingCell, (val: EditingCell) => void]; const [, setEditingCell] = useAtom(editingCellAtom) as unknown as [EditingCell, (val: EditingCell) => void];
const handleDirtyChange = useCallback((dirty: boolean) => { const handleDirtyChange = useCallback((dirty: boolean) => {
@@ -108,18 +109,22 @@ export const GridHeaderCell = memo(function GridHeaderCell({
// Mantine's built-in `closeOnEscape` only fires when focus is inside the // Mantine's built-in `closeOnEscape` only fires when focus is inside the
// dropdown, but opening the property menu (clicking the header) leaves // dropdown, but opening the property menu (clicking the header) leaves
// focus on the header itself. Add a document-level ESC handler that // focus on the header itself. Mirror the click-outside path: when dirty,
// closes the menu when it's open and not dirty. // bump `propertyMenuCloseRequestAtom` so property-menu shows its
// "Unsaved changes" confirmation panel; otherwise close directly.
useEffect(() => { useEffect(() => {
if (!menuOpened) return; if (!menuOpened) return;
const handler = (e: KeyboardEvent) => { const handler = (e: KeyboardEvent) => {
if (e.key !== "Escape") return; if (e.key !== "Escape") return;
if (propertyMenuDirty) return; if (propertyMenuDirty) {
handleMenuClose(); setCloseRequest(closeRequest + 1);
} else {
handleMenuClose();
}
}; };
document.addEventListener("keydown", handler); document.addEventListener("keydown", handler);
return () => document.removeEventListener("keydown", handler); return () => document.removeEventListener("keydown", handler);
}, [menuOpened, propertyMenuDirty, handleMenuClose]); }, [menuOpened, propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose]);
const TypeIcon = property ? typeIcons[property.type] : undefined; const TypeIcon = property ? typeIcons[property.type] : undefined;