add reference to useShortcuts

app/src/components/v-form/form-field.vue

@@ -35,7 +35,6 @@
 			:batch-active="batchActive"
 			:disabled="isDisabled"
 			:primary-key="primaryKey"
-			data-disable-mousetrap
 			@input="$emit('input', $event)"
 		/>
 

app/src/components/v-modal/v-modal.vue

@@ -37,7 +37,6 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, provide } from '@vue/composition-api';
-import useShortcut from '@/composables/use-shortcut';
 
 export default defineComponent({
 	model: {
@@ -73,11 +72,6 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		useShortcut('esc', () => {
-			console.log('A');
-
-			_active.value = false;
-		});
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 

app/src/components/v-table/v-table.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="v-table" :class="{ loading, inline, disabled }">
+	<div class="v-table" :class="{ loading, inline, disabled }" ref="table">
 		<table
 			:summary="_headers.map((header) => header.text).join(', ')"
 			:style="{
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, PropType } from '@vue/composition-api';
+import { defineComponent, computed, ref, PropType, onMounted, watch } from '@vue/composition-api';
 import { Header, HeaderRaw, Item, ItemSelectEvent, Sort } from './types';
 import TableHeader from './table-header/';
 import TableRow from './table-row/';
@@ -185,6 +185,8 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit, listeners, slots }) {
+		const table = ref<HTMLElement | null>(null);
+
 		const _headers = computed({
 			get: () => {
 				return props.headers
@@ -292,9 +294,13 @@ export default defineComponent({
 			return gridTemplateColumns;
 		});
 
-		useShortcut('mod+a', () => {
-			onToggleSelectAll(!allItemsSelected.value);
-		});
+		useShortcut(
+			'mod+a',
+			() => {
+				onToggleSelectAll(!allItemsSelected.value);
+			},
+			table
+		);
 
 		return {
 			_headers,
@@ -311,6 +317,7 @@ export default defineComponent({
 			columnStyle,
 			hasItemAppendSlot,
 			hideDragImage,
+			table,
 		};
 
 		function onItemSelected(event: ItemSelectEvent) {

app/src/composables/use-shortcut/use-shortcut.ts

@@ -1,24 +1,27 @@
-import { onMounted, onUnmounted } from '@vue/composition-api';
+import { onMounted, onUnmounted, Ref } from '@vue/composition-api';
+import Vue from 'vue';
 import Mousetrap from 'mousetrap';
 
 const mousetrap = new Mousetrap();
-mousetrap.stopCallback = function (e: Event, element: Element) {
-	// if the element has the class "mousetrap" then no need to stop
-	if (element.hasAttribute('data-disable-mousetrap') || element.closest('*[data-disable-mousetrap]') !== null) {
-		return true;
-	}
-
-	return false;
-};
 
 export default function useShortcut(
 	shortcut: string | string[],
-	handler: (evt?: ExtendedKeyboardEvent, combo?: string) => void
+	handler: (evt?: ExtendedKeyboardEvent, combo?: string) => void,
+	reference: Ref<HTMLElement | null> | Ref<Vue | null>
 ) {
 	onMounted(() => {
 		mousetrap.bind(shortcut, (e, combo) => {
-			e.preventDefault();
-			handler(e, combo);
+			if (reference.value === null) return;
+			const ref = reference.value instanceof HTMLElement ? reference.value : (reference.value.$el as HTMLElement);
+
+			if (
+				document.activeElement === ref ||
+				ref.contains(document.activeElement) ||
+				document.activeElement === document.body
+			) {
+				e.preventDefault();
+				handler(e, combo);
+			}
 		});
 	});
 	onUnmounted(() => {

app/src/modules/collections/routes/detail.vue

@@ -137,6 +137,7 @@
 		</template>
 
 		<v-form
+			ref="form"
 			:disabled="isNew ? false : updateAllowed === false"
 			:loading="loading"
 			:initial-values="item"
@@ -182,6 +183,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
+import Vue from 'vue';
 
 import CollectionsNavigation from '../components/navigation.vue';
 import router from '@/router';
@@ -223,6 +225,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const form = ref<Vue | null>(null);
 		const userStore = useUserStore();
 
 		const { collection, primaryKey } = toRefs(props);
@@ -283,8 +286,8 @@ export default defineComponent({
 			return i18n.t('archive');
 		});
 
-		useShortcut('mod+s', saveAndStay);
-		useShortcut('mod+shift+s', saveAndAddNew);
+		useShortcut('mod+s', saveAndStay, form);
+		useShortcut('mod+shift+s', saveAndAddNew, form);
 
 		const navigationGuard: NavigationGuard = (to, from, next) => {
 			const hasEdits = Object.keys(edits.value).length > 0;
@@ -337,6 +340,7 @@ export default defineComponent({
 			updateAllowed,
 			toggleArchive,
 			validationErrors,
+			form,
 		};
 
 		function useBreadcrumb() {

app/src/modules/files/routes/detail.vue

@@ -132,6 +132,7 @@
 			/>
 
 			<v-form
+				ref="form"
 				:fields="formFields"
 				:loading="loading"
 				:initial-values="item"
@@ -231,6 +232,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const form = ref<HTMLElement | null>(null);
 		const { primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
 		const fieldsStore = useFieldsStore();
@@ -291,7 +293,7 @@ export default defineComponent({
 
 		const { moveToDialogActive, moveToFolder, moving, selectedFolder } = useMovetoFolder();
 
-		useShortcut('mod+s', saveAndStay);
+		useShortcut('mod+s', saveAndStay, form);
 
 		return {
 			item,
@@ -324,6 +326,7 @@ export default defineComponent({
 			moving,
 			selectedFolder,
 			fileSrc,
+			form,
 		};
 
 		function changeCacheBuster() {

app/src/modules/users/routes/detail.vue

@@ -119,6 +119,7 @@
 			</div>
 
 			<v-form
+				ref="form"
 				:fields="formFields"
 				:loading="loading"
 				:initial-values="item"
@@ -208,6 +209,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const form = ref<HTMLElement | null>(null);
 		const fieldsStore = useFieldsStore();
 		const userStore = useUserStore();
 
@@ -291,8 +293,8 @@ export default defineComponent({
 			return i18n.t('archive');
 		});
 
-		useShortcut('mod+s', saveAndStay);
-		useShortcut('mod+shift+s', saveAndAddNew);
+		useShortcut('mod+s', saveAndStay, form);
+		useShortcut('mod+shift+s', saveAndAddNew, form);
 
 		return {
 			title,
@@ -330,6 +332,7 @@ export default defineComponent({
 			collectionInfo,
 			archiving,
 			archiveTooltip,
+			form,
 		};
 
 		function useBreadcrumb() {

app/src/views/private/components/comments-drawer-detail/comment-input.vue

@@ -1,5 +1,11 @@
 <template>
-	<v-textarea class="new-comment" :placeholder="$t('leave_comment')" v-model="newCommentContent" expand-on-focus>
+	<v-textarea
+		class="new-comment"
+		:placeholder="$t('leave_comment')"
+		v-model="newCommentContent"
+		expand-on-focus
+		ref="textarea"
+	>
 		<template #append>
 			<v-icon name="alternate_email" class="add-mention" />
 			<v-icon name="insert_emoticon" class="add-emoji" />
@@ -40,11 +46,12 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		useShortcut('mod+enter', postComment);
+		const textarea = ref<HTMLElement | null>(null);
+		useShortcut('mod+enter', postComment, textarea);
 		const newCommentContent = ref<string | null>(null);
 		const saving = ref(false);
 
-		return { newCommentContent, postComment, saving };
+		return { newCommentContent, postComment, saving, textarea };
 
 		async function postComment() {
 			if (newCommentContent.value === null || newCommentContent.value.length === 0) return;