From c19ac51ffabdd94760c895c3f99f7b9c192d412e Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 9 Oct 2020 14:55:58 +0200
Subject: [PATCH] add 'close' event to v-dialog and v-modal

---
 app/src/components/v-dialog/v-dialog.vue                    | 3 ++-
 app/src/components/v-form/form-field.vue                    | 2 +-
 app/src/components/v-modal/v-modal.vue                      | 2 +-
 app/src/components/v-upload/v-upload.vue                    | 2 +-
 app/src/interfaces/_system/tfa-setup/tfa-setup.vue          | 2 +-
 app/src/interfaces/file/file.vue                            | 4 ++--
 app/src/modules/activity/routes/detail.vue                  | 2 +-
 .../modules/collections/components/navigation-bookmark.vue  | 4 ++--
 app/src/modules/collections/routes/browse.vue               | 3 ++-
 app/src/modules/collections/routes/detail.vue               | 5 +++--
 app/src/modules/files/components/add-folder.vue             | 2 +-
 app/src/modules/files/components/navigation-folder.vue      | 6 +++---
 app/src/modules/files/routes/add-new.vue                    | 2 +-
 app/src/modules/files/routes/browse.vue                     | 4 ++--
 app/src/modules/files/routes/detail.vue                     | 6 +++---
 .../collections/components/collection-options.vue           | 2 +-
 .../routes/data-model/field-detail/field-detail.vue         | 2 ++
 .../routes/data-model/fields/components/field-select.vue    | 4 ++--
 .../modules/settings/routes/data-model/fields/fields.vue    | 2 +-
 .../modules/settings/routes/data-model/new-collection.vue   | 4 ++--
 app/src/modules/settings/routes/presets/browse/browse.vue   | 2 +-
 app/src/modules/settings/routes/presets/detail.vue          | 2 +-
 app/src/modules/settings/routes/roles/add-new.vue           | 2 +-
 .../routes/roles/detail/components/permissions-overview.vue | 2 +-
 app/src/modules/settings/routes/roles/detail/detail.vue     | 2 +-
 app/src/modules/settings/routes/webhooks/browse.vue         | 2 +-
 app/src/modules/settings/routes/webhooks/detail.vue         | 2 +-
 app/src/modules/users/routes/browse.vue                     | 2 +-
 app/src/modules/users/routes/detail.vue                     | 5 +++--
 .../views/private/components/bookmark-add/bookmark-add.vue  | 2 +-
 .../private/components/bookmark-edit/bookmark-edit.vue      | 2 +-
 .../comments-drawer-detail/comment-item-header.vue          | 2 +-
 .../private/components/file-lightbox/file-lightbox.vue      | 2 +-
 .../views/private/components/image-editor/image-editor.vue  | 2 +-
 .../views/private/components/modal-browse/modal-browse.vue  | 2 +-
 .../views/private/components/modal-detail/modal-detail.vue  | 2 +-
 .../components/module-bar-avatar/module-bar-avatar.vue      | 2 +-
 .../components/revisions-drawer-detail/revisions-modal.vue  | 4 ++--
 38 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index 7a40ec3fb9..62821f7b3b 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -33,9 +33,10 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const dialog = ref<HTMLElement | null>(null);
+
 		useShortcut('escape', (event, cancelNext) => {
 			if (_active.value) {
-				emitToggle();
+				emit('close')
 				cancelNext();
 			}
 		});
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index 5496e464dd..c1a8381ee2 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -38,7 +38,7 @@
 			@input="$emit('input', $event)"
 		/>
 
-		<v-dialog v-model="showRaw">
+		<v-dialog v-model="showRaw" @close="showRaw = false">
 			<v-card>
 				<v-card-title>{{ $t('edit_raw_value') }}</v-card-title>
 				<v-card-text>
diff --git a/app/src/components/v-modal/v-modal.vue b/app/src/components/v-modal/v-modal.vue
index eb1156650a..f75605a213 100644
--- a/app/src/components/v-modal/v-modal.vue
+++ b/app/src/components/v-modal/v-modal.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="_active" :persistent="persistent">
+	<v-dialog v-model="_active" @close="$emit('close')" :persistent="persistent">
 		<template #activator="{ on }">
 			<slot name="activator" v-bind="{ on }" />
 		</template>
diff --git a/app/src/components/v-upload/v-upload.vue b/app/src/components/v-upload/v-upload.vue
index 50f44a49b3..5678433dab 100644
--- a/app/src/components/v-upload/v-upload.vue
+++ b/app/src/components/v-upload/v-upload.vue
@@ -59,7 +59,7 @@
 					@input="setSelection"
 				/>
 
-				<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" :persistent="urlLoading">
+				<v-dialog :active="activeDialog === 'url'" @close="activeDialog = null" @toggle="activeDialog = null" :persistent="urlLoading">
 					<v-card>
 						<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 						<v-card-text>
diff --git a/app/src/interfaces/_system/tfa-setup/tfa-setup.vue b/app/src/interfaces/_system/tfa-setup/tfa-setup.vue
index 0003cbccd8..6e33ece173 100644
--- a/app/src/interfaces/_system/tfa-setup/tfa-setup.vue
+++ b/app/src/interfaces/_system/tfa-setup/tfa-setup.vue
@@ -8,7 +8,7 @@
 			</template>
 		</v-checkbox>
 
-		<v-dialog persistent v-model="enableActive">
+		<v-dialog persistent v-model="enableActive" @close="enableActive = false">
 			<v-card>
 				<template v-if="tfaEnabled === false" v-show="loading === false">
 					<v-card-title>
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 649af6e682..4f11a0faa9 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -67,7 +67,7 @@
 			</v-list>
 		</v-menu>
 
-		<v-dialog :active="activeDialog === 'upload'" @toggle="activeDialog = null">
+		<v-dialog :active="activeDialog === 'upload'" @close="activeDialog = null" @toggle="activeDialog = null">
 			<v-card>
 				<v-card-title>{{ $t('upload_from_device') }}</v-card-title>
 				<v-card-text>
@@ -86,7 +86,7 @@
 			@input="setSelection"
 		/>
 
-		<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" :persistent="urlLoading">
+		<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" @close="activeDialog = null" :persistent="urlLoading">
 			<v-card>
 				<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 				<v-card-text>
diff --git a/app/src/modules/activity/routes/detail.vue b/app/src/modules/activity/routes/detail.vue
index f596f9b3a9..bc39056002 100644
--- a/app/src/modules/activity/routes/detail.vue
+++ b/app/src/modules/activity/routes/detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal active title="Activity Item" @toggle="close">
+	<v-modal active title="Activity Item" @toggle="close" @close="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
 		<template v-else-if="error">
diff --git a/app/src/modules/collections/components/navigation-bookmark.vue b/app/src/modules/collections/components/navigation-bookmark.vue
index a3f6b1ccf5..725066edde 100644
--- a/app/src/modules/collections/components/navigation-bookmark.vue
+++ b/app/src/modules/collections/components/navigation-bookmark.vue
@@ -27,7 +27,7 @@
 			</v-list>
 		</v-menu>
 
-		<v-dialog v-model="renameActive" persistent>
+		<v-dialog v-model="renameActive" persistent @close="renameActive = false">
 			<v-card>
 				<v-card-title>{{ $t('rename_bookmark') }}</v-card-title>
 				<v-card-text>
@@ -40,7 +40,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="deleteActive" persistent>
+		<v-dialog v-model="deleteActive" persistent @close="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_bookmark_copy', { bookmark: bookmark.bookmark }) }}</v-card-title>
 				<v-card-actions>
diff --git a/app/src/modules/collections/routes/browse.vue b/app/src/modules/collections/routes/browse.vue
index 39f5aa9a56..2cc17f3811 100644
--- a/app/src/modules/collections/routes/browse.vue
+++ b/app/src/modules/collections/routes/browse.vue
@@ -66,7 +66,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						:disabled="batchDeleteAllowed !== true"
@@ -96,6 +96,7 @@
 
 			<v-dialog
 				v-model="confirmArchive"
+				@close="confirmArchive = false"
 				v-if="selection.length > 0 && currentCollection.meta && currentCollection.meta.archive_field"
 			>
 				<template #activator="{ on }">
diff --git a/app/src/modules/collections/routes/detail.vue b/app/src/modules/collections/routes/detail.vue
index b3e191db7b..6922529079 100644
--- a/app/src/modules/collections/routes/detail.vue
+++ b/app/src/modules/collections/routes/detail.vue
@@ -48,7 +48,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-if="!isNew" v-model="confirmDelete" :disabled="deleteAllowed === false">
+			<v-dialog v-if="!isNew" v-model="confirmDelete" :disabled="deleteAllowed === false" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -80,6 +80,7 @@
 			<v-dialog
 				v-if="collectionInfo.meta && collectionInfo.meta.archive_field && !isNew"
 				v-model="confirmArchive"
+				@close="confirmArchive = false"
 				:disabled="archiveAllowed === false"
 			>
 				<template #activator="{ on }">
@@ -148,7 +149,7 @@
 			v-model="edits"
 		/>
 
-		<v-dialog v-model="confirmLeave">
+		<v-dialog v-model="confirmLeave" @close="confirmLeave = false">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
diff --git a/app/src/modules/files/components/add-folder.vue b/app/src/modules/files/components/add-folder.vue
index 7d205af456..ddb049f488 100644
--- a/app/src/modules/files/components/add-folder.vue
+++ b/app/src/modules/files/components/add-folder.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="dialogActive">
+	<v-dialog v-model="dialogActive" @close="dialogActive = false">
 		<template #activator="{ on }">
 			<v-button rounded icon class="add-new" @click="on" v-tooltip.bottom="$t('create_folder')">
 				<v-icon name="create_new_folder" outline />
diff --git a/app/src/modules/files/components/navigation-folder.vue b/app/src/modules/files/components/navigation-folder.vue
index 650b4c5cd7..63c92484d3 100644
--- a/app/src/modules/files/components/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation-folder.vue
@@ -66,7 +66,7 @@
 			</v-list>
 		</v-menu>
 
-		<v-dialog v-model="renameActive" persistent>
+		<v-dialog v-model="renameActive" persistent @close="renameActive = false">
 			<v-card>
 				<v-card-title>{{ $t('rename_folder') }}</v-card-title>
 				<v-card-text>
@@ -79,7 +79,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="moveActive" persistent>
+		<v-dialog v-model="moveActive" persistent @close="moveActive = false">
 			<v-card>
 				<v-card-title>{{ $t('move_to_folder') }}</v-card-title>
 				<v-card-text>
@@ -92,7 +92,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="deleteActive" persistent>
+		<v-dialog v-model="deleteActive" persistent @close="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_folder') }}</v-card-title>
 				<v-card-text>
diff --git a/app/src/modules/files/routes/add-new.vue b/app/src/modules/files/routes/add-new.vue
index ce41651630..d158aea47a 100644
--- a/app/src/modules/files/routes/add-new.vue
+++ b/app/src/modules/files/routes/add-new.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog :active="true" @toggle="close">
+	<v-dialog :active="true" @toggle="close" @close="close">
 		<v-card>
 			<v-card-title>{{ $t('add_file') }}</v-card-title>
 			<v-card-text>
diff --git a/app/src/modules/files/routes/browse.vue b/app/src/modules/files/routes/browse.vue
index efed794445..3ad8671c0e 100644
--- a/app/src/modules/files/routes/browse.vue
+++ b/app/src/modules/files/routes/browse.vue
@@ -19,7 +19,7 @@
 
 			<add-folder :parent="queryFilters && queryFilters.folder" />
 
-			<v-dialog v-model="moveToDialogActive" v-if="selection.length > 0">
+			<v-dialog v-model="moveToDialogActive" v-if="selection.length > 0" @close="moveToDialogActive = false">
 				<template #activator="{ on }">
 					<v-button rounded icon @click="on" class="folder" v-tooltip.bottom="$t('move_to_folder')">
 						<v-icon name="folder_move" />
@@ -44,7 +44,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/files/routes/detail.vue b/app/src/modules/files/routes/detail.vue
index e36f2a3533..c3798bf17e 100644
--- a/app/src/modules/files/routes/detail.vue
+++ b/app/src/modules/files/routes/detail.vue
@@ -12,7 +12,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -40,7 +40,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-dialog v-model="moveToDialogActive" v-if="isNew === false">
+			<v-dialog v-model="moveToDialogActive" v-if="isNew === false" @close="moveToDialogActive = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -142,7 +142,7 @@
 			/>
 		</div>
 
-		<v-dialog v-model="confirmLeave">
+		<v-dialog v-model="confirmLeave" @close="discardAndLeave">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
index 4f759bbdfc..c098d6b26f 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
@@ -15,7 +15,7 @@
 				</v-list-item>
 			</v-list>
 		</v-menu>
-		<v-dialog v-model="deleteActive">
+		<v-dialog v-model="deleteActive" @close="deleteActive = null">
 			<v-card>
 				<v-card-title>{{ $t('delete_collection_are_you_sure') }}</v-card-title>
 				<v-card-actions>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index cd39daaf7e..320499d4d9 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -2,6 +2,7 @@
 	<v-dialog
 		persistent
 		:active="true"
+		@close="cancelField"
 		v-if="localType === 'translations' && translationsManual === false && field === '+'"
 	>
 		<v-card class="auto-translations">
@@ -31,6 +32,7 @@
 		v-else
 		:active="true"
 		@toggle="cancelField"
+		@close="cancelField"
 		:title="
 			field === '+'
 				? $t('creating_new_field', { collection: collectionInfo.name })
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 757fd9bf0e..e788702e1b 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -152,7 +152,7 @@
 			</template>
 		</v-input>
 
-		<v-dialog v-model="duplicateActive">
+		<v-dialog v-model="duplicateActive" @close="duplicateActive = false">
 			<v-card class="duplicate">
 				<v-card-title>{{ $t('duplicate_where_to') }}</v-card-title>
 				<v-card-text>
@@ -179,7 +179,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="deleteActive">
+		<v-dialog v-model="deleteActive" @close="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_field_are_you_sure', { field: field.field }) }}</v-card-title>
 				<v-card-actions>
diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue
index 691fcbde48..0c9b5fb9cb 100644
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -8,7 +8,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index 7b9f43688b..dfd2833d66 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -1,6 +1,6 @@
 <template>
-	<v-modal :title="$t('creating_new_collection')" :active="true" class="new-collection" persistent>
-		<v-dialog :active="saveError !== null" @toggle="saveError = null">
+	<v-modal :title="$t('creating_new_collection')" :active="true" class="new-collection" persistent @close="$router.push('/settings/data-model')">
+		<v-dialog :active="saveError !== null" @toggle="saveError = null" @close="saveError = null">
 			<v-card class="selectable">
 				<v-card-title>
 					{{ saveError && saveError.message }}
diff --git a/app/src/modules/settings/routes/presets/browse/browse.vue b/app/src/modules/settings/routes/presets/browse/browse.vue
index 69e3db577c..6a29151cba 100644
--- a/app/src/modules/settings/routes/presets/browse/browse.vue
+++ b/app/src/modules/settings/routes/presets/browse/browse.vue
@@ -9,7 +9,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/settings/routes/presets/detail.vue b/app/src/modules/settings/routes/presets/detail.vue
index 16ff12f6f6..61d6af06d4 100644
--- a/app/src/modules/settings/routes/presets/detail.vue
+++ b/app/src/modules/settings/routes/presets/detail.vue
@@ -12,7 +12,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
diff --git a/app/src/modules/settings/routes/roles/add-new.vue b/app/src/modules/settings/routes/roles/add-new.vue
index d4eabad338..ed23777495 100644
--- a/app/src/modules/settings/routes/roles/add-new.vue
+++ b/app/src/modules/settings/routes/roles/add-new.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog active persistent>
+	<v-dialog active persistent @close="$router.push('/settings/roles')">
 		<v-card>
 			<v-card-title>
 				{{ $t('create_role') }}
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview.vue b/app/src/modules/settings/routes/roles/detail/components/permissions-overview.vue
index 5712dcc3ca..6e9e2b4e09 100644
--- a/app/src/modules/settings/routes/roles/detail/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview.vue
@@ -47,7 +47,7 @@
 			{{ $t('reset_system_permissions') }}
 		</button>
 
-		<v-dialog v-model="resetActive">
+		<v-dialog v-model="resetActive" @close="resetActive = false">
 			<v-card>
 				<v-card-title>{{ $t('reset_system_permissions') }}</v-card-title>
 				<v-card-text>{{ $t('reset_system_permissions_copy') }}</v-card-text>
diff --git a/app/src/modules/settings/routes/roles/detail/detail.vue b/app/src/modules/settings/routes/roles/detail/detail.vue
index 3e49730db7..ac7422d485 100644
--- a/app/src/modules/settings/routes/roles/detail/detail.vue
+++ b/app/src/modules/settings/routes/roles/detail/detail.vue
@@ -7,7 +7,7 @@
 			</v-button>
 		</template>
 		<template #actions>
-			<v-dialog v-model="confirmDelete" v-if="[1, 2].includes(+primaryKey) === false">
+			<v-dialog v-model="confirmDelete" v-if="[1, 2].includes(+primaryKey) === false" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
diff --git a/app/src/modules/settings/routes/webhooks/browse.vue b/app/src/modules/settings/routes/webhooks/browse.vue
index b95d46053b..93deba967e 100644
--- a/app/src/modules/settings/routes/webhooks/browse.vue
+++ b/app/src/modules/settings/routes/webhooks/browse.vue
@@ -15,7 +15,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/settings/routes/webhooks/detail.vue b/app/src/modules/settings/routes/webhooks/detail.vue
index c6a177bdc8..003282ac63 100644
--- a/app/src/modules/settings/routes/webhooks/detail.vue
+++ b/app/src/modules/settings/routes/webhooks/detail.vue
@@ -9,7 +9,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/users/routes/browse.vue b/app/src/modules/users/routes/browse.vue
index 5cbf84e15b..d7841b2243 100644
--- a/app/src/modules/users/routes/browse.vue
+++ b/app/src/modules/users/routes/browse.vue
@@ -17,7 +17,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/users/routes/detail.vue b/app/src/modules/users/routes/detail.vue
index 2d12dc23ac..3ab94055ef 100644
--- a/app/src/modules/users/routes/detail.vue
+++ b/app/src/modules/users/routes/detail.vue
@@ -11,7 +11,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -42,6 +42,7 @@
 			<v-dialog
 				v-if="collectionInfo.meta && collectionInfo.meta.archive_field && !isNew"
 				v-model="confirmArchive"
+				@close="confirmArchive = false"
 				:disabled="archiveAllowed === false"
 			>
 				<template #activator="{ on }">
@@ -129,7 +130,7 @@
 			/>
 		</div>
 
-		<v-dialog v-model="confirmLeave">
+		<v-dialog v-model="confirmLeave" @close="confirmLeave = false">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
diff --git a/app/src/views/private/components/bookmark-add/bookmark-add.vue b/app/src/views/private/components/bookmark-add/bookmark-add.vue
index 9cd2b1ecfb..3c8bbfa6d5 100644
--- a/app/src/views/private/components/bookmark-add/bookmark-add.vue
+++ b/app/src/views/private/components/bookmark-add/bookmark-add.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog :active="active" @toggle="$listeners.toggle" persistent>
+	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @close="cancel">
 		<template #activator="slotBinding">
 			<slot name="activator" v-bind="slotBinding" />
 		</template>
diff --git a/app/src/views/private/components/bookmark-edit/bookmark-edit.vue b/app/src/views/private/components/bookmark-edit/bookmark-edit.vue
index 1703d02a9f..b32afeeb5c 100644
--- a/app/src/views/private/components/bookmark-edit/bookmark-edit.vue
+++ b/app/src/views/private/components/bookmark-edit/bookmark-edit.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog :active="active" @toggle="$listeners.toggle" persistent>
+	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @close="cancel">
 		<template #activator="slotBinding">
 			<slot name="activator" v-bind="slotBinding" />
 		</template>
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
index cdfaef8526..36e85a2570 100644
--- a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
+++ b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
@@ -46,7 +46,7 @@
 			</v-menu>
 		</div>
 
-		<v-dialog v-model="confirmDelete">
+		<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_comment') }}</v-card-title>
 				<v-card-text>{{ $t('delete_are_you_sure') }}</v-card-text>
diff --git a/app/src/views/private/components/file-lightbox/file-lightbox.vue b/app/src/views/private/components/file-lightbox/file-lightbox.vue
index 06411dd11a..4d56c291c8 100644
--- a/app/src/views/private/components/file-lightbox/file-lightbox.vue
+++ b/app/src/views/private/components/file-lightbox/file-lightbox.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="_active">
+	<v-dialog v-model="_active" @close="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 94c014129d..bda0d1ef37 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding>
+	<v-modal v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @close="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
diff --git a/app/src/views/private/components/modal-browse/modal-browse.vue b/app/src/views/private/components/modal-browse/modal-browse.vue
index c96c892c51..b63042b532 100644
--- a/app/src/views/private/components/modal-browse/modal-browse.vue
+++ b/app/src/views/private/components/modal-browse/modal-browse.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="$t('select_item')" no-padding>
+	<v-modal v-model="_active" :title="$t('select_item')" no-padding @close="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
diff --git a/app/src/views/private/components/modal-detail/modal-detail.vue b/app/src/views/private/components/modal-detail/modal-detail.vue
index c74eb7a554..8e11984332 100644
--- a/app/src/views/private/components/modal-detail/modal-detail.vue
+++ b/app/src/views/private/components/modal-detail/modal-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="title" persistent form-width>
+	<v-modal v-model="_active" :title="title" persistent form-width @close="cancel">
 		<template v-if="junctionField">
 			<v-form
 				:loading="loading"
diff --git a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
index 2daf6cf4f7..3c76236af5 100644
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-hover class="module-bar-avatar" v-slot="{ hover }">
-		<v-dialog v-model="signOutActive">
+		<v-dialog v-model="signOutActive" @close="signOutActive = false">
 			<template #activator="{ on }">
 				<v-button
 					@click="on"
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
index 177a88d880..53ed24003d 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-modal v-model="_active" :title="$t('item_revision')">
+		<v-modal v-model="_active" :title="$t('item_revision')" @close="_active = false">
 			<template #subtitle>
 				<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
 			</template>
@@ -30,7 +30,7 @@
 			</template>
 		</v-modal>
 
-		<v-dialog v-model="confirmRevert" :persistent="reverting">
+		<v-dialog v-model="confirmRevert" :persistent="reverting" @close="confirmRevert = false">
 			<v-card>
 				<v-card-title>{{ $t('confirm_revert') }}</v-card-title>
 				<v-card-text>{{ $t('confirm_revert_body') }}</v-card-text>