Show edit page confirmation dialog on tree view file change (#36130)

Currently, when editing or deleting a file and the edit/commit form has
changes, navigating the file tree will discard all changes without any
warning. This PR prevents partial reloading when the edit form has
unsaved changes, which will trigger a browser native warning dialog.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
bytedream
2025-12-20 02:29:39 +01:00
committed by GitHub
parent b4c9057f92
commit 05c3b84f84
2 changed files with 23 additions and 6 deletions

View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import {SvgIcon} from '../svg.ts';
import {isPlainClick} from '../utils/dom.ts';
import {shouldTriggerAreYouSure} from '../vendor/jquery.are-you-sure.ts';
import {shallowRef} from 'vue';
import type {createViewFileTreeStore, FileTreeItem} from './ViewFileTreeStore.ts';
@@ -27,9 +28,10 @@ const doLoadChildren = async () => {
};
const onItemClick = (e: MouseEvent) => {
// only handle the click event with page partial reloading if the user didn't press any special key
// let browsers handle special keys like "Ctrl+Click"
if (!isPlainClick(e)) return;
// only handle the click event with partial page reloading if both
// - the user didn't press any special key like "Ctrl+Click" (which may have custom browser behavior)
// - the editor/commit form isn't dirty (a full page reload shows a confirmation dialog if the form contains unsaved changes)
if (!isPlainClick(e) || shouldTriggerAreYouSure()) return;
e.preventDefault();
if (props.item.entryMode === 'tree') doLoadChildren();
store.navigateTreeView(props.item.fullPath);