From 3f8ec7848c4125b1ea00122e93b0cc342787e4b3 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 18:38:55 +0000 Subject: [PATCH 1/2] Remove jQuery `.attr` from the Fomantic modal cancel buttons - Switched from jQuery `attr` to plain javascript `setAttribute` - Tested the modals and they work as before --- web_src/js/modules/fomantic/modal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web_src/js/modules/fomantic/modal.js b/web_src/js/modules/fomantic/modal.js index 7c9aade790333..a9ff9f3664a9c 100644 --- a/web_src/js/modules/fomantic/modal.js +++ b/web_src/js/modules/fomantic/modal.js @@ -19,7 +19,8 @@ function ariaModalFn(...args) { // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed. // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form. // So, all "cancel" buttons without "[type]" must be marked as "type=button". - $(el).find('form button.cancel:not([type])').attr('type', 'button'); + const buttons = el.querySelectorAll('form button.cancel:not([type])'); + for (const button of buttons) button.setAttribute('type', 'button'); } } return ret; From d9c9ae24ebaf31c043703da81c0729197e2b16f0 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 20:56:36 +0200 Subject: [PATCH 2/2] Update web_src/js/modules/fomantic/modal.js Co-authored-by: silverwind --- web_src/js/modules/fomantic/modal.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web_src/js/modules/fomantic/modal.js b/web_src/js/modules/fomantic/modal.js index a9ff9f3664a9c..8b455cf4ded08 100644 --- a/web_src/js/modules/fomantic/modal.js +++ b/web_src/js/modules/fomantic/modal.js @@ -19,8 +19,9 @@ function ariaModalFn(...args) { // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed. // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form. // So, all "cancel" buttons without "[type]" must be marked as "type=button". - const buttons = el.querySelectorAll('form button.cancel:not([type])'); - for (const button of buttons) button.setAttribute('type', 'button'); + for (const button of el.querySelectorAll('form button.cancel:not([type])')) { + button.setAttribute('type', 'button'); + } } } return ret;