I am utilizing a Quasar dialog to display content, and I want users to be able to close the dialog by pressing the Escape key. However, if a user has made edits within the dialog and hits the Escape key, I'd like to prompt them with another dialog to confirm whether they want to discard the changes to avoid accidental data loss.
The challenge lies in the fact that I have two options - I can either disable the Escape key entirely:
<template>
<q-dialog
v-model="showDialog"
no-backdrop-dismiss
no-esc-dismiss
>
</template>
This approach prevents users from closing the dialog with the Escape key, even if no changes were made. Alternatively, I can allow the Escape key and try to intercept the event:
<template>
<q-dialog
v-model="showDialog"
no-backdrop-dismiss
@escape-key="dismissDialog"
>
</template>
<script setup lang="ts">
function dismissDialog() {
if (unsavedChanges) {
Dialog.create({
title: 'Unsaved changes',
message: 'You have unsaved changes. Do you want to discard them?',
ok: 'Discard changes',
cancel: true,
})
.onCancel(() => {
return;
})
.onOk(() => {
emit('dismissDialog');
});
} else {
emit('dismissDialog');
}
}
</script>
The issue with the second approach is that I can detect unsaved changes easily, but once I exit dismissDialog, the dialog closes automatically without any way to interrupt the closing process.
I have explored using the @before-hide method, but the event returned is always undefined, making it seemingly impossible to intercept the Escape key event and prevent the dialog from closing unless I disable the Escape key entirely.
If anyone has a solution to this dilemma, I would greatly appreciate the insight.