feat(q-dialog): Add configurable option to not close dialog when clicking button fix: #17120

docs/src/examples/Dialog/Async.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-btn label="hide await Async" color="primary" @click="openDialog" />
+  </div>
+</template>
+
+<script>
+import { useQuasar } from 'quasar'
+
+export default {
+  setup () {
+    const $q = useQuasar()
+
+    // Simulate an asynchronous task that takes two seconds to complete
+    function mockAsyncJob () {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve()
+        }, 2000)
+      })
+    }
+
+    function openDialog () {
+      const dialog = $q.dialog({
+        title: 'Confirm',
+        message: 'Would you like to turn on the wifi?',
+        ok: {
+          push: true,
+          loading: false,
+          notHide: true // We don't want to close the dialog immediately after clicking the OK button
+        },
+        cancel: {
+          push: true,
+          color: 'negative'
+          // notHide: true // we can also set not close the dialog immediately after clicking the Cancel button
+        },
+        persistent: true // we want the user to not be able to close it
+      }).onOk(async () => {
+        // console.log('>>>> OK')
+        // We will manually close the dialog after waiting for the asynchronous task to complete
+        dialog.update({
+          ok: {
+            label: 'connecting',
+            loading: true
+          }
+        })
+        await mockAsyncJob()
+        dialog.update({
+          ok: {
+            loading: false
+          }
+        })
+        dialog.hide()
+      }).onCancel(() => {
+        // console.log('>>>> Cancel')
+      }).onDismiss(() => {
+        // console.log('I am triggered on both OK and Cancel')
+      })
+    }
+
+    return { openDialog }
+  }
+}
+</script>

docs/src/pages/quasar-plugins/dialog.md

@@ -87,6 +87,13 @@ There is a basic validation system that you can use so that the user won't be ab
 
 <DocExample title="Showing progress" file="Progress" />
 
+### Hide await async task <q-badge label="Quasar 2.15.3+" />
+
+Don't to close the dialog immediately after clicking the OK or Cancel button
+
+<DocExample title="Hide await Async task" file="Async" />
+
+
 ### Using HTML
 You can use HTML on title and message if you specify the `html: true` prop. **Please note that this can lead to XSS attacks**, so make sure that you sanitize the message by yourself.
 

ui/src/plugins/dialog/component/DialogPluginComponent.js

@@ -173,11 +173,11 @@ export default createComponent({
 
     function onOk () {
       emit('ok', toRaw(model.value))
-      hide()
+      if(!props.ok?.notHide)  hide()
     }
 
     function onCancel () {
-      hide()
+      if(!props.cancel?.notHide) hide()
     }
 
     function onDialogHide () {