public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: close dialogs on backdrop click

Browse Source 
Native dialog elements don't close on backdrop click by default.
Added click handlers that check if click target is the dialog itself
(not its children) to enable this expected UX behavior.
This commit is contained in:
Michael Czechowski
2025-12-30 14:54:49 +01:00
parent 83d1bb4d18
commit 0ad7ea1c54
2 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.de.js
View File

@@ -553,8 +553,14 @@ function init() {
// Dialogs // Dialogs
elements.helpBtn.addEventListener("click", showHelp); elements.helpBtn.addEventListener("click", showHelp);
elements.helpDialogClose.addEventListener("click", closeHelpDialog); elements.helpDialogClose.addEventListener("click", closeHelpDialog);
elements.helpDialog.addEventListener("click", (e) => {
if (e.target === elements.helpDialog) closeHelpDialog();
});
elements.resetBtn.addEventListener("click", showResetConfirmation); elements.resetBtn.addEventListener("click", showResetConfirmation);
elements.resetDialogClose.addEventListener("click", closeResetDialog); elements.resetDialogClose.addEventListener("click", closeResetDialog);
elements.resetDialog.addEventListener("click", (e) => {
if (e.target === elements.resetDialog) closeResetDialog();
});
elements.cancelReset.addEventListener("click", closeResetDialog); elements.cancelReset.addEventListener("click", closeResetDialog);
elements.confirmReset.addEventListener("click", handleResetConfirm); elements.confirmReset.addEventListener("click", handleResetConfirm);

6
src/app.js
View File

@@ -579,8 +579,14 @@ function init() {
// Dialogs // Dialogs
elements.helpBtn.addEventListener("click", showHelp); elements.helpBtn.addEventListener("click", showHelp);
elements.helpDialogClose.addEventListener("click", closeHelpDialog); elements.helpDialogClose.addEventListener("click", closeHelpDialog);
elements.helpDialog.addEventListener("click", (e) => {
if (e.target === elements.helpDialog) closeHelpDialog();
});
elements.resetBtn.addEventListener("click", showResetConfirmation); elements.resetBtn.addEventListener("click", showResetConfirmation);
elements.resetDialogClose.addEventListener("click", closeResetDialog); elements.resetDialogClose.addEventListener("click", closeResetDialog);
elements.resetDialog.addEventListener("click", (e) => {
if (e.target === elements.resetDialog) closeResetDialog();
});
elements.cancelReset.addEventListener("click", closeResetDialog); elements.cancelReset.addEventListener("click", closeResetDialog);
elements.confirmReset.addEventListener("click", handleResetConfirm); elements.confirmReset.addEventListener("click", handleResetConfirm);