forked from go-gitea/gitea
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make "cancel" buttons have proper type in modal forms (go-gitea#25618)
Replace go-gitea#25446, fix go-gitea#25438 All "cancel" buttons which do not have "type" should not submit the form, should not be triggered by "Enter". This is a complete fix for all modal dialogs. The major change is "modules/aria/modal.js", "devtest" related code is for demo/test purpose. # Conflicts: # routers/web/devtest/devtest.go
- Loading branch information
1 parent
d8a59d5
commit b8543da
Showing
4 changed files
with
51 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import $ from 'jquery'; | ||
|
||
const fomanticModalFn = $.fn.modal; | ||
|
||
// use our own `$.fn.modal` to patch Fomantic's modal module | ||
export function initAriaModalPatch() { | ||
if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once'); | ||
$.fn.modal = ariaModalFn; | ||
ariaModalFn.settings = fomanticModalFn.settings; | ||
} | ||
|
||
// the patched `$.fn.modal` modal function | ||
// * it does the one-time attaching on the first call | ||
function ariaModalFn(...args) { | ||
const ret = fomanticModalFn.apply(this, args); | ||
if (args[0] === 'show' || args[0]?.autoShow) { | ||
for (const el of this) { | ||
// If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default). | ||
// 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'); | ||
} | ||
} | ||
return ret; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters