Warn on navigation if currently editing comment or title (#32223)

Author: Tim Wundenberg

web_src/js/features/repo-issue-edit.ts

@@ -24,6 +24,7 @@ async function tryOnEditContent(e) {
     e.preventDefault();
     showElem(renderContent);
     hideElem(editContentZone);
+    window.removeEventListener('beforeunload', showUserHintOnNavigate);
     comboMarkdownEditor.dropzoneReloadFiles();
   };
 
@@ -32,6 +33,7 @@ async function tryOnEditContent(e) {
     renderContent.classList.add('is-loading');
     showElem(renderContent);
     hideElem(editContentZone);
+    window.removeEventListener('beforeunload', showUserHintOnNavigate);
     try {
       const params = new URLSearchParams({
         content: comboMarkdownEditor.value(),
@@ -82,6 +84,7 @@ async function tryOnEditContent(e) {
   // Show write/preview tab and copy raw content as needed
   showElem(editContentZone);
   hideElem(renderContent);
+  window.addEventListener('beforeunload', showUserHintOnNavigate);
 
   comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
   if (!comboMarkdownEditor) {
@@ -148,6 +151,11 @@ async function tryOnQuoteReply(e) {
   editor.moveCursorToEnd();
 }
 
+// Show a warning message when the user tries to navigate, even though he is currently editing
+function showUserHintOnNavigate(e: BeforeUnloadEvent) {
+  e.preventDefault();
+}
+
 export function initRepoIssueCommentEdit() {
   document.addEventListener('click', (e) => {
     tryOnEditContent(e); // Edit issue or comment content

web_src/js/features/repo-issue.ts

@@ -546,12 +546,15 @@ export function initRepoIssueTitleEdit() {
       issueTitleInput.value = oldTitle;
     }
     issueTitleInput.focus();
+
+    window.addEventListener('beforeunload', showUserHintOnNavigate);
   });
   issueTitleEditor.querySelector('.ui.cancel.button').addEventListener('click', () => {
     hideElem(issueTitleEditor);
     hideElem('#pull-desc-editor');
     showElem(issueTitleDisplay);
     showElem('#pull-desc-display');
+    window.removeEventListener('beforeunload', showUserHintOnNavigate);
   });
 
   const pullDescEditor = document.querySelector('#pull-desc-editor'); // it may not exist for a merged PR
@@ -577,6 +580,7 @@ export function initRepoIssueTitleEdit() {
           }
         }
       }
+      window.removeEventListener('beforeunload', showUserHintOnNavigate);
       window.location.reload();
     } catch (error) {
       console.error(error);
@@ -585,6 +589,11 @@ export function initRepoIssueTitleEdit() {
   });
 }
 
+// Show a warning message when the user tries to navigate, even though he is currently editing
+function showUserHintOnNavigate(e: BeforeUnloadEvent) {
+  e.preventDefault();
+}
+
 export function initRepoIssueBranchSelect() {
   document.querySelector('#branch-select')?.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
     const el = e.target.closest('.item[data-branch]');