fix(issue): #32223 warn on navigation if currently editing comment or title

Author: Tim Wundenberg

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

@@ -18,12 +18,13 @@ async function tryOnEditContent(e) {
   const renderContent = segment.querySelector('.render-content');
   const rawContent = segment.querySelector('.raw-content');
 
-  let comboMarkdownEditor : ComboMarkdownEditor;
+  let comboMarkdownEditor: ComboMarkdownEditor;
 
   const cancelAndReset = (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

@@ -61,7 +61,7 @@ function initRepoIssueLabelFilter(elDropdown: Element) {
     selectedLabelIds.add(`${Math.abs(parseInt(id))}`); // "labels" contains negative ids, which are excluded
   }
 
-  const excludeLabel = (e: MouseEvent|KeyboardEvent, item: Element) => {
+  const excludeLabel = (e: MouseEvent | KeyboardEvent, item: Element) => {
     e.preventDefault();
     e.stopPropagation();
     const labelId = item.getAttribute('data-label-id');
@@ -124,7 +124,7 @@ export function initRepoIssueFilterItemLabel() {
 
 export function initRepoIssueCommentDelete() {
   // Delete comment
-  document.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', async (e: MouseEvent & { target: HTMLElement }) => {
     if (!e.target.matches('.delete-comment')) return;
     e.preventDefault();
 
@@ -199,7 +199,7 @@ export function initRepoIssueDependencyDelete() {
 
 export function initRepoIssueCodeCommentCancel() {
   // Cancel inline code comment
-  document.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', (e: MouseEvent & { target: HTMLElement }) => {
     if (!e.target.matches('.cancel-code-comment')) return;
 
     const form = e.target.closest('form');
@@ -217,7 +217,7 @@ export function initRepoPullRequestUpdate() {
   const pullUpdateButton = document.querySelector('.update-button > button');
   if (!pullUpdateButton) return;
 
-  pullUpdateButton.addEventListener('click', async function (e) {
+  pullUpdateButton.addEventListener('click', async function(e) {
     e.preventDefault();
     const redirect = this.getAttribute('data-redirect');
     this.classList.add('is-loading');
@@ -273,9 +273,11 @@ export function initRepoPullRequestAllowMaintainerEdit() {
     const url = `${wrapper.getAttribute('data-url')}/set_allow_maintainer_edit`;
     wrapper.classList.add('is-loading');
     try {
-      const resp = await POST(url, {data: new URLSearchParams({
-        allow_maintainer_edit: String(checkbox.checked),
-      })});
+      const resp = await POST(url, {
+        data: new URLSearchParams({
+          allow_maintainer_edit: String(checkbox.checked),
+        }),
+      });
       if (!resp.ok) {
         throw new Error('Failed to update maintainer edit permission');
       }
@@ -340,7 +342,7 @@ export function initRepoIssueWipTitle() {
 export function initRepoIssueComments() {
   if (!$('.repository.view.issue .timeline').length) return;
 
-  document.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', (e: MouseEvent & { target: HTMLElement }) => {
     const urlTarget = document.querySelector(':target');
     if (!urlTarget) return;
 
@@ -406,7 +408,7 @@ export function initRepoPullRequestReview() {
     }
   }
 
-  $(document).on('click', '.show-outdated', function (e) {
+  $(document).on('click', '.show-outdated', function(e) {
     e.preventDefault();
     const id = this.getAttribute('data-comment');
     hideElem(this);
@@ -415,7 +417,7 @@ export function initRepoPullRequestReview() {
     showElem(`#hide-outdated-${id}`);
   });
 
-  $(document).on('click', '.hide-outdated', function (e) {
+  $(document).on('click', '.hide-outdated', function(e) {
     e.preventDefault();
     const id = this.getAttribute('data-comment');
     hideElem(this);
@@ -424,7 +426,7 @@ export function initRepoPullRequestReview() {
     showElem(`#show-outdated-${id}`);
   });
 
-  $(document).on('click', 'button.comment-form-reply', async function (e) {
+  $(document).on('click', 'button.comment-form-reply', async function(e) {
     e.preventDefault();
     await handleReply(this);
   });
@@ -492,7 +494,7 @@ export function initRepoPullRequestReview() {
 
 export function initRepoIssueReferenceIssue() {
   // Reference issue
-  $(document).on('click', '.reference-issue', function (e) {
+  $(document).on('click', '.reference-issue', function(e) {
     const target = this.getAttribute('data-target');
     const content = document.querySelector(`#${target}`)?.textContent ?? '';
     const poster = this.getAttribute('data-poster-username');
@@ -546,12 +548,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 +582,7 @@ export function initRepoIssueTitleEdit() {
           }
         }
       }
+      window.removeEventListener('beforeunload', showUserHintOnNavigate);
       window.location.reload();
     } catch (error) {
       console.error(error);
@@ -585,8 +591,13 @@ 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}) => {
+  document.querySelector('#branch-select')?.addEventListener('click', (e: MouseEvent & { target: HTMLElement }) => {
     const el = e.target.closest('.item[data-branch]');
     if (!el) return;
     const pullTargetBranch = document.querySelector('#pull-target-branch');