OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Interrupt Quasar QDialog closing on Escape key, given a certain condition

  • Thread starter Thread starter Alexander Pacha
  • Start date Start date
A

Alexander Pacha

Guest
I use a Quasar dialog for showing some content. I want the users to be able to close the dialog when clicking the Escape button, which works fine. However, if the user made some edits in the dialog and hits the Escape key, I would like to show another dialog, asking whether the user really wants to discard the changes to prevent accidental data loss.

The problem is that I can either completely disable the Escape key like this:

Code:
<template>
  <q-dialog
    v-model="showDialog"
    no-backdrop-dismiss
    no-esc-dismiss    
  >
</template>

but then the user won't be able to close the dialog with the escape key, even if they didn't perform any changes or I can allow the escape key and try to intercept the event:

Code:
<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 problem is that in the second scenario I can easily detect that there are unsaved changes, but the moment I leave dismissDialog, the dialog will be closed anyway and I don't seem to have any possibility to interrupt closing the dialog.

I've also checked the @before-hide method, but the event I'm getting there is always undefined so it seems like I have no way to intercept the escape key event and prevent the dialog closing, unless I completely disable the escape key.

Does anyone have an idea how to do this?

<p>I use a Quasar dialog for showing some content. I want the users to be able to close the dialog when clicking the Escape button, which works fine. However, if the user made some edits in the dialog and hits the Escape key, I would like to show another dialog, asking whether the user really wants to discard the changes to prevent accidental data loss.</p>
<p>The problem is that I can either completely disable the Escape key like this:</p>
<pre class="lang-js prettyprint-override"><code><template>
<q-dialog
v-model="showDialog"
no-backdrop-dismiss
no-esc-dismiss
>
</template>
</code></pre>
<p>but then the user won't be able to close the dialog with the escape key, even if they didn't perform any changes or I can allow the escape key and try to intercept the event:</p>
<pre class="lang-js prettyprint-override"><code><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>
</code></pre>
<p>The problem is that in the second scenario I can easily detect that there are unsaved changes, but the moment I leave dismissDialog, the dialog will be closed anyway and I don't seem to have any possibility to interrupt closing the dialog.</p>
<p>I've also checked the <a href="https://quasar.dev/vue-components/dialog#qdialog-api" rel="nofollow noreferrer"><code>@before-hide</code></a> method, but the event I'm getting there is always <code>undefined</code> so it seems like I have no way to intercept the escape key event and prevent the dialog closing, unless I completely disable the escape key.</p>
<p>Does anyone have an idea how to do this?</p>
 
Top