De-convert buttons inside dropdown text content

delvh · wxiaoguang · silverwind · delvh · commit 89a26fcc820c · 2023-03-13T21:07:38.000+01:00
Additionally, prevent the default event propagation for all buttons with JS, convert `event` to `e` in `web_src/js/features/common-global.js` for consistency and add fontawesome-save svg. Closes #2 Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io>
diff --git a/public/img/svg/fontawesome-save.svg b/public/img/svg/fontawesome-save.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 448 512" class="svg fontawesome-save" width="16" height="16" aria-hidden="true"><path d="m434 130-84-84a48 48 0 0 0-33.9-14H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V163.9a48 48 0 0 0-14-34zM224 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128zm96-304.5V212a12 12 0 0 1-12 12H76a12 12 0 0 1-12-12V108a12 12 0 0 1 12-12h228.5a12 12 0 0 1 8.5 3.5l3.5 3.5a12 12 0 0 1 3.5 8.5z"/></svg>
diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl
@@ -214,6 +214,6 @@
 			<p class="help">{{.locale.Tr "admin.users.purge_help"}}</p>
 		</div>
 		{{template "base/delete_modal_actions" .}}
-</form>
+	</form>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl
@@ -5,11 +5,13 @@
 		<h2 class="ui header"><time data-format="date" datetime="{{.DateFrom}}">{{.DateFrom}}</time> - <time data-format="date" datetime="{{.DateUntil}}">{{.DateUntil}}</time>
 			<div class="ui right">
 				<!-- Period -->
-				<div class="ui basic compact button floating dropdown jump filter">
-					<span class="text">
-						{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-					</span>
+				<div class="ui floating dropdown jump filter">
+					<div class="ui basic compact button">
+						<span class="text">
+							{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						</span>
+					</div>
 					<div class="menu">
 						<a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{.locale.Tr "repo.activity.period.daily"}}</a>
 						<a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{.locale.Tr "repo.activity.period.halfweekly"}}</a>
diff --git a/templates/repo/cite/cite_modal.tmpl b/templates/repo/cite/cite_modal.tmpl
@@ -15,7 +15,7 @@
 		</div>
 	</div>
 	<div class="actions">
-		<button class="ui black deny button">
+		<button class="ui black cancel button">
 			{{.locale.Tr "cancel"}}
 		</button>
 	</div>
diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
@@ -43,10 +43,10 @@
 	<div class="ui segment choose branch">
 		<a href="{{$.HeadRepo.Link}}/compare/{{PathEscapeSegments $.HeadBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.BaseName}}/{{PathEscape $.Repository.Name}}:{{end}}{{PathEscapeSegments $.BaseBranch}}" title="{{.locale.Tr "repo.pulls.switch_head_and_base"}}">{{svg "octicon-git-compare"}}</a>
 		<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
-			<button class="ui basic small button">
+			<div class="ui basic small button">
 				<span class="text">{{if $.PageIsComparePull}}{{.locale.Tr "repo.pulls.compare_base"}}{{else}}{{.locale.Tr "repo.compare.compare_base"}}{{end}}: {{$BaseCompareName}}:{{$.BaseBranch}}</span>
 				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-			</button>
+			</div>
 			<div class="menu">
 				<div class="ui icon search input">
 					<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
@@ -112,10 +112,10 @@
 		</div>
 		<a href="{{.RepoLink}}/compare/{{PathEscapeSegments .BaseBranch}}{{.OtherCompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}" title="{{.locale.Tr "repo.pulls.switch_comparison_type"}}">{{.CompareSeparator}}</a>
 		<div class="ui floating filter dropdown">
-			<button class="ui basic small button">
+			<div class="ui basic small button">
 				<span class="text">{{if $.PageIsComparePull}}{{.locale.Tr "repo.pulls.compare_compare"}}{{else}}{{.locale.Tr "repo.compare.compare_head"}}{{end}}: {{$HeadCompareName}}:{{$.HeadBranch}}</span>
 				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-			</button>
+			</div>
 			<div class="menu">
 				<div class="ui icon search input">
 					<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl
@@ -50,7 +50,7 @@
 				{{.locale.Tr "repo.editor.cancel"}}
 			</button>
 			<button class="ui green basic inverted ok button">
-				<i class="save icon"></i>{{/* TODO: Is there no fitting octicon? */}}
+				{{svg "fontawesome-save"}}
 				{{.locale.Tr "repo.editor.commit_changes"}}
 			</button>
 		</div>
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
@@ -6,10 +6,10 @@
 </form>
 
 <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
-	<button class="ui basic small button">
+	<div class="ui basic small button">
 		<span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{.locale.Tr "repo.issues.no_ref"}}{{end}}</span>
 		{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
-	</button>
+	</div>
 	<div class="menu">
 		<div class="ui icon search input">
 			<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
@@ -61,16 +61,16 @@
 			{{end}}
 			<span id="pull-desc-edit" class="gt-hidden">
 				<div class="ui floating filter dropdown">
-					<button class="ui basic small button">
+					<div class="ui basic small button">
 						<span class="text">{{.locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
-					</button>
+					</div>
 				</div>
 				{{svg "octicon-arrow-right"}}
 				<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
-					<button class="ui basic small button">
+					<div class="ui basic small button">
 						<span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.locale.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-					</button>
+					</div>
 					<div class="menu">
 						<div class="ui icon search input">
 							<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl
@@ -2,7 +2,7 @@
 	{{.Title}}
 	<div class="ui right">
 		<div class="ui floating1 jump dropdown">
-			<button class="ui primary tiny button">{{.locale.Tr "repo.settings.add_webhook"}}</button>
+			<div class="ui primary tiny button">{{.locale.Tr "repo.settings.add_webhook"}}</div>
 			<div class="menu">
 				<a class="item" href="{{.BaseLinkNew}}/gitea/new">
 					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/gitea.svg">{{.locale.Tr "repo.settings.web_hook_name_gitea"}}
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
@@ -7,13 +7,13 @@
 			<div class="gt-df gt-ac">
 				<div class="choose page">
 					<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
-						<button class="ui basic small button">
+						<div class="ui basic small button">
 							<span class="text">
 								{{.locale.Tr "repo.wiki.page"}}:
 								<strong>{{$title}}</strong>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-						</button>
+						</div>
 						<div class="menu">
 							<div class="ui icon search input">
 								<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl
@@ -3,7 +3,7 @@
 	{{if .OrderedOAuth2Names}}
 		<div class="ui right">
 			<div class="ui dropdown">
-				<button class="ui primary tiny button">{{.locale.Tr "settings.link_account"}}</button>
+				<div class="ui primary tiny button">{{.locale.Tr "settings.link_account"}}</div>
 				<div class="menu">
 					{{range $key := .OrderedOAuth2Names}}
 						{{$provider := index $.OAuth2Providers $key}}
diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js
@@ -198,7 +198,8 @@ export function initAdminCommon() {
           break;
       }
     });
-    $('#delete-selection').on('click', function () {
+    $('#delete-selection').on('click', function (e) {
+      e.preventDefault();
       const $this = $(this);
       $this.addClass('loading disabled');
       const ids = [];
diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js
@@ -83,8 +83,9 @@ function attachOneDropdownAria($dropdown) {
     if (e.key === 'Enter') {
       let $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value'));
       if (!$item) $item = $menu.find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item
-      // if the selected item is clickable, then trigger the click event. in the future there could be a special CSS class for it.
-      if ($item && $item.is('a')) $item[0].click();
+      // if the selected item is clickable, then trigger the click event.
+      // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click.
+      if ($item && ($item.is('a') || $item.is('.js-aria-clickable'))) $item[0].click();
     }
   });
 
@@ -96,11 +97,6 @@ function attachOneDropdownAria($dropdown) {
   $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAria(); });
 }
 
-export function initCancelButtons(rootElement=document) {
-  // Only cancel buttons should have the 'cancel' class, and these buttons should not submit an underlying form, so set 'type="button"' for them
-  rootElement.querySelectorAll('.cancel').forEach(cancelButton => cancelButton.setAttribute('type', 'button'));
-}
-
 export function attachDropdownAria($dropdowns) {
   $dropdowns.each((_, e) => attachOneDropdownAria($(e)));
 }
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
@@ -49,20 +49,20 @@ export function initFootLanguageMenu() {
 
 
 export function initGlobalEnterQuickSubmit() {
-  $(document).on('keydown', '.js-quick-submit', (event) => {
-    if (((event.ctrlKey && !event.altKey) || event.metaKey) && (event.key === 'Enter')) {
-      handleGlobalEnterQuickSubmit(event.target);
+  $(document).on('keydown', '.js-quick-submit', (e) => {
+    if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter')) {
+      handleGlobalEnterQuickSubmit(e.target);
       return false;
     }
   });
 }
 
 export function initGlobalButtonClickOnEnter() {
-  $(document).on('keypress', '.ui.button', (event) => {
-    if (event.keyCode === 13 || event.keyCode === 32) { // enter key or space bar
-      if (event.target.nodeName === 'BUTTON') return; // button already handles space&enter correctly
-      $(event.target).trigger('click');
-      event.preventDefault();
+  $(document).on('keypress', '.ui.button', (e) => {
+    if (e.keyCode === 13 || e.keyCode === 32) { // enter key or space bar
+      if (e.target.nodeName === 'BUTTON') return; // button already handles space&enter correctly
+      $(e.target).trigger('click');
+      e.preventDefault();
     }
   });
 }
@@ -202,7 +202,8 @@ export function initGlobalDropzone() {
 }
 
 export function initGlobalLinkActions() {
-  function showDeletePopup() {
+  function showDeletePopup(e) {
+    e.preventDefault();
     const $this = $(this);
     const dataArray = $this.data();
     let filter = '';
@@ -243,10 +244,10 @@ export function initGlobalLinkActions() {
         });
       }
     }).modal('show');
-    return false;
   }
 
-  function showAddAllPopup() {
+  function showAddAllPopup(e) {
+    e.preventDefault();
     const $this = $(this);
     let filter = '';
     if ($this.attr('id')) {
@@ -272,7 +273,6 @@ export function initGlobalLinkActions() {
         });
       }
     }).modal('show');
-    return false;
   }
 
   function linkAction(e) {
@@ -318,14 +318,21 @@ export function initGlobalLinkActions() {
 }
 
 export function initGlobalButtons() {
-  $('.show-panel.button').on('click', function (event) {
-    event.preventDefault();
+  // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
+  // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
+  // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
+  $(document).on('click', 'form .ui.cancel.button', (e) => {
+    e.preventDefault();
+  });
+
+  $('.show-panel.button').on('click', function (e) {
+    e.preventDefault();
     showElem($(this).data('panel'));
   });
 
-  $('.hide-panel.button').on('click', function (event) {
+  $('.hide-panel.button').on('click', function (e) {
     // a `.hide-panel.button` can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
-    event.preventDefault();
+    e.preventDefault();
     let sel = $(this).attr('data-panel');
     if (sel) {
       hideElem($(sel));
@@ -340,8 +347,8 @@ export function initGlobalButtons() {
     alert('Nothing to hide');
   });
 
-  $('.show-modal').on('click', function (event) {
-    event.preventDefault();
+  $('.show-modal').on('click', function (e) {
+    e.preventDefault();
     const modalDiv = $($(this).attr('data-modal'));
     for (const attrib of this.attributes) {
       if (!attrib.name.startsWith('data-modal-')) {
@@ -362,8 +369,8 @@ export function initGlobalButtons() {
     }
   });
 
-  $('.delete-post.button').on('click', function (event) {
-    event.preventDefault();
+  $('.delete-post.button').on('click', function (e) {
+    e.preventDefault();
     const $this = $(this);
     $.post($this.attr('data-request-url'), {
       _csrf: csrfToken
diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js
@@ -34,6 +34,7 @@ export function initCommonIssue() {
   });
 
   $('.issue-action').on('click', async function (e) {
+    e.preventDefault();
     let action = this.getAttribute('data-action');
     let elementId = this.getAttribute('data-element-id');
     const url = this.getAttribute('data-url');
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
@@ -230,7 +230,8 @@ export function initRepoIssueStatusButton() {
     const value = easyMDE?.value() || $(this).val();
     $statusButton.text($statusButton.data(value.length === 0 ? 'status' : 'status-and-comment'));
   });
-  $statusButton.on('click', () => {
+  $statusButton.on('click', (e) => {
+    e.preventDefault();
     $('#status').val($statusButton.data('status-val'));
     $('#comment-form').trigger('submit');
   });
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
@@ -412,7 +412,8 @@ async function onEditContent(event) {
       $saveButton.trigger('click');
     });
 
-    $editContentZone.find('.cancel.button').on('click', () => {
+    $editContentZone.find('.cancel.button').on('click', (e) => {
+      e.preventDefault();
       showElem($renderContent);
       hideElem($editContentZone);
       if (dz) {
diff --git a/web_src/js/index.js b/web_src/js/index.js
@@ -6,7 +6,6 @@ import {initVueEnv} from './components/VueComponentLoader.js';
 import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
 import {initDashboardRepoList} from './components/DashboardRepoList.js';
 
-import {initCancelButtons} from './features/aria.js';
 import {attachTribute} from './features/tribute.js';
 import {initGlobalCopyToClipboardListener} from './features/clipboard.js';
 import {initContextPopups} from './features/contextpopup.js';
@@ -199,5 +198,4 @@ $(document).ready(() => {
   initUserAuthWebAuthnRegister();
   initUserSettings();
   initViewedCheckboxListenerFor();
-  initCancelButtons();
 });
diff --git a/web_src/svg/fontawesome-save.svg b/web_src/svg/fontawesome-save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 448 512"><path d="m434 130-84-84a48 48 0 0 0-33.9-14H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V163.9a48 48 0 0 0-14-34zM224 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128zm96-304.5V212a12 12 0 0 1-12 12H76a12 12 0 0 1-12-12V108a12 12 0 0 1 12-12h228.5a12 12 0 0 1 8.5 3.5l3.5 3.5a12 12 0 0 1 3.5 8.5z"/></svg>
