fix dirty form check

Author: wxiaoguang

templates/repo/issue/view_content.tmpl

@@ -158,8 +158,8 @@
 
 		<div class="field">
 			<div class="text right edit">
-				<button class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
-				<button class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
+				<button type="button" class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
+				<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
 			</div>
 		</div>
 	</form>

templates/repo/issue/view_title.tmpl

@@ -31,8 +31,8 @@
 			<input name="title" value="{{.Issue.Title}}" data-old-title="{{.Issue.Title}}" maxlength="255" autocomplete="off" />
 		</div>
 		<div class="issue-title-buttons">
-			<button class="ui small basic cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
-			<button class="ui small primary button" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title">
+			<button type="button" class="ui small basic cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
+			<button type="submit" class="ui small primary button" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title">
 				{{ctx.Locale.Tr "repo.issues.save"}}
 			</button>
 		</div>

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

@@ -7,7 +7,7 @@ import {attachRefIssueContextPopup} from './contextpopup.ts';
 import {initCommentContent, initMarkupContent} from '../markup/content.ts';
 import {triggerUploadStateChanged} from './comp/EditorUpload.ts';
 import {convertHtmlToMarkdown} from '../markup/html2markdown.ts';
-import {applyAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {applyAreYouSure, reinitializeAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 
 async function tryOnEditContent(e) {
   const clickTarget = e.target.closest('.edit-content');
@@ -20,16 +20,19 @@ async function tryOnEditContent(e) {
   const rawContent = segment.querySelector('.raw-content');
 
   let comboMarkdownEditor : ComboMarkdownEditor;
+  let form: HTMLFormElement;
 
   const cancelAndReset = (e) => {
     e.preventDefault();
+    form.classList.add('ignore-dirty');
     showElem(renderContent);
     hideElem(editContentZone);
     comboMarkdownEditor.dropzoneReloadFiles();
   };
 
   const saveAndRefresh = async (e) => {
     e.preventDefault();
+    form.classList.remove('ignore-dirty');
     renderContent.classList.add('is-loading');
     showElem(renderContent);
     hideElem(editContentZone);
@@ -49,6 +52,7 @@ async function tryOnEditContent(e) {
         showErrorToast(data.errorMessage);
         return;
       }
+      reinitializeAreYouSure(form);
       editContentZone.setAttribute('data-content-version', data.contentVersion);
       if (!data.content) {
         renderContent.innerHTML = document.querySelector('#no-content').innerHTML;
@@ -87,14 +91,15 @@ async function tryOnEditContent(e) {
   comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
   if (!comboMarkdownEditor) {
     editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template').innerHTML;
-    applyAreYouSure(editContentZone.firstElementChild);
+    form = editContentZone.querySelector('form');
+    applyAreYouSure(form);
     const saveButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.primary.button');
     const cancelButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.cancel.button');
     comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
     const syncUiState = () => saveButton.disabled = comboMarkdownEditor.isUploading();
     comboMarkdownEditor.container.addEventListener(ComboMarkdownEditor.EventUploadStateChanged, syncUiState);
     cancelButton.addEventListener('click', cancelAndReset);
-    saveButton.addEventListener('click', saveAndRefresh);
+    form.addEventListener('submit', saveAndRefresh);
   }
 
   // FIXME: ideally here should reload content and attachment list from backend for existing editor, to avoid losing data

web_src/js/features/repo-issue.ts

@@ -16,7 +16,6 @@ import {GET, POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
-import {applyAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 
 const {appSubUrl} = window.config;
 
@@ -533,14 +532,13 @@ export function initRepoIssueWipToggle() {
 
 export function initRepoIssueTitleEdit() {
   const issueTitleDisplay = document.querySelector('#issue-title-display');
-  const issueTitleEditor = document.querySelector('#issue-title-editor');
+  const issueTitleEditor = document.querySelector<HTMLFormElement>('#issue-title-editor');
   if (!issueTitleEditor) return;
 
-  applyAreYouSure(issueTitleEditor);
-
   const issueTitleInput = issueTitleEditor.querySelector('input');
   const oldTitle = issueTitleInput.getAttribute('data-old-title');
   issueTitleDisplay.querySelector('#issue-title-edit-show').addEventListener('click', () => {
+    issueTitleEditor.classList.remove('ignore-dirty');
     hideElem(issueTitleDisplay);
     hideElem('#pull-desc-display');
     showElem(issueTitleEditor);
@@ -551,6 +549,7 @@ export function initRepoIssueTitleEdit() {
     issueTitleInput.focus();
   });
   issueTitleEditor.querySelector('.ui.cancel.button').addEventListener('click', () => {
+    issueTitleEditor.classList.add('ignore-dirty');
     hideElem(issueTitleEditor);
     hideElem('#pull-desc-editor');
     showElem(issueTitleDisplay);
@@ -561,7 +560,8 @@ export function initRepoIssueTitleEdit() {
   const prTargetUpdateUrl = pullDescEditor?.getAttribute('data-target-update-url');
 
   const editSaveButton = issueTitleEditor.querySelector('.ui.primary.button');
-  editSaveButton.addEventListener('click', async () => {
+  issueTitleEditor.addEventListener('submit', async (e) => {
+    e.preventDefault();
     const newTitle = issueTitleInput.value.trim();
     try {
       if (newTitle && newTitle !== oldTitle) {
@@ -580,6 +580,7 @@ export function initRepoIssueTitleEdit() {
           }
         }
       }
+      issueTitleEditor.classList.remove('dirty');
       window.location.reload();
     } catch (error) {
       console.error(error);

web_src/js/vendor/jquery.are-you-sure.ts

@@ -2,6 +2,7 @@
 // Fork of the upstream module. The only changes are:
 // * use export to make it work with ES6 modules.
 // * the addition of `const` to make it strict mode compatible.
+// * check "ignore-dirty" class, ignore forms with this class.
 
 /*!
  * jQuery Plugin: Are-You-Sure (Dirty Form Detection)
@@ -161,7 +162,7 @@ export function initAreYouSure($) {
     if (!settings.silent && !window.aysUnloadSet) {
       window.aysUnloadSet = true;
       $(window).bind('beforeunload', function() {
-        const $dirtyForms = $("form").filter('.' + settings.dirtyClass);
+        const $dirtyForms = $("form:not(.ignore-dirty)").filter('.' + settings.dirtyClass);
         if ($dirtyForms.length == 0) {
           return;
         }
@@ -199,3 +200,7 @@ export function initAreYouSure($) {
 export function applyAreYouSure(selectorOrEl: string|Element|$, opts = {}) {
   $(selectorOrEl).areYouSure(opts);
 }
+
+export function reinitializeAreYouSure(selectorOrEl: string|Element|$) {
+  $(selectorOrEl).trigger('reinitialize.areYouSure');
+}