fix cmd+enter submit shortcut on modals #1238

2026-10-15 01:03:16 +01:00 · 2026-09-04 17:33:01 +02:00
parent 45c7377802
commit c1dce20902
22 changed files with 89 additions and 24 deletions
--- a/resources/js/Components/Common/Client/ClientCreateModal.vue
+++ b/resources/js/Components/Common/Client/ClientCreateModal.vue
@@ -28,7 +28,7 @@ useFocus(clientNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Create Client </span>
--- a/resources/js/Components/Common/Client/ClientEditModal.vue
+++ b/resources/js/Components/Common/Client/ClientEditModal.vue
@@ -30,7 +30,7 @@ useFocus(clientNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Update Client </span>
--- a/resources/js/Components/Common/Member/MemberEditModal.vue
+++ b/resources/js/Components/Common/Member/MemberEditModal.vue
@@ -136,7 +136,7 @@ const roleDescription = computed(() => {
        v-model:show="showOwnershipTransferConfirmModal"
        :member-name="member.name"
        @submit="submit"></MemberOwnershipTransferConfirmModal>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="saveWithChecks()">
        <template #title>
            <div class="flex space-x-2">
                <span> Update Member </span>
--- a/resources/js/Components/Common/Member/MemberInviteModal.vue
+++ b/resources/js/Components/Common/Member/MemberInviteModal.vue
@@ -78,7 +78,7 @@ useFocus(clientNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Invite Member </span>
--- a/resources/js/Components/Common/Project/ProjectEditModal.vue
+++ b/resources/js/Components/Common/Project/ProjectEditModal.vue
@@ -79,7 +79,7 @@ async function submitBillableRate() {
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Edit Project {{ props.originalProject.name }} </span>
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue
@@ -38,7 +38,7 @@ useFocus(projectNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span>Add Project Member</span>
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue
@@ -63,7 +63,7 @@ useFocus(projectNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span>Edit Project Member</span>
--- a/resources/js/Components/Common/Report/ReportCreateModal.vue
+++ b/resources/js/Components/Common/Report/ReportCreateModal.vue
@@ -79,7 +79,7 @@ async function submit() {
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Create Report </span>
--- a/resources/js/Components/Common/Report/ReportEditModal.vue
+++ b/resources/js/Components/Common/Report/ReportEditModal.vue
@@ -96,7 +96,7 @@ async function submit() {
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Create Report </span>
--- a/resources/js/Components/Common/Tag/TagEditModal.vue
+++ b/resources/js/Components/Common/Tag/TagEditModal.vue
@@ -36,7 +36,7 @@ useFocus(tagNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Update Tag </span>
--- a/resources/js/Components/Common/Task/TaskCreateModal.vue
+++ b/resources/js/Components/Common/Task/TaskCreateModal.vue
@@ -50,7 +50,7 @@ useFocus(taskNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Create Task </span>
--- a/resources/js/Components/Common/Task/TaskEditModal.vue
+++ b/resources/js/Components/Common/Task/TaskEditModal.vue
@@ -35,7 +35,7 @@ useFocus(taskNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Update Task </span>
--- a/resources/js/Components/Timesheet/BreakPlacementModal.vue
+++ b/resources/js/Components/Timesheet/BreakPlacementModal.vue
@@ -179,7 +179,7 @@ async function submit() {
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="emit('cancel')">
+    <DialogModal closeable :show="show" @close="emit('cancel')" @submit="submit">
        <template #title>
            <div class="flex items-center space-x-2">
                <Coffee class="w-5 h-5 text-text-secondary" />
--- a/resources/js/packages/ui/src/DialogModal.vue
+++ b/resources/js/packages/ui/src/DialogModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Modal from './Modal.vue';

-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'submit']);

 defineProps({
    show: {
@@ -24,7 +24,12 @@ const close = () => {
 </script>

 <template>
-    <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
+    <Modal
+        :show="show"
+        :max-width="maxWidth"
+        :closeable="closeable"
+        @close="close"
+        @submit="emit('submit')">
        <div class="px-4 lg:px-6 py-4">
            <div class="text-lg font-medium text-text-primary" role="heading">
                <slot name="title" />
--- a/resources/js/packages/ui/src/Modal.vue
+++ b/resources/js/packages/ui/src/Modal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Dialog, DialogContent, DialogFooter } from './dialog/index';
-import { computed } from 'vue';
+import { computed, nextTick } from 'vue';

 const props = defineProps({
    show: {
@@ -17,7 +17,7 @@ const props = defineProps({
    },
 });

-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'submit']);

 const close = () => {
    if (props.closeable) {
@@ -25,6 +25,25 @@ const close = () => {
    }
 };

+// Ctrl+Enter (Cmd+Enter on macOS) submits the modal from any focused element inside it.
+// Handled in the capture phase so child elements (buttons, dropdown triggers, inputs with
+// their own Enter handlers) never see the keystroke and cannot open or double-submit.
+async function onKeydownCapture(event: KeyboardEvent) {
+    if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey) || event.isComposing) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    // Inputs like the time and duration fields commit their value on blur, so blur first
+    // and let the resulting model updates settle before submitting.
+    const active = document.activeElement;
+    if (active instanceof HTMLElement) {
+        active.blur();
+    }
+    await nextTick();
+    emit('submit');
+}
+
 const maxWidthClass = computed(() => {
    return {
        sm: 'sm:max-w-sm',
@@ -39,7 +58,7 @@ const maxWidthClass = computed(() => {
 <template>
    <Dialog :open="show" @update:open="close">
        <DialogContent :class="maxWidthClass">
-            <div class="min-w-0">
+            <div class="min-w-0" @keydown.capture="onKeydownCapture">
                <slot />
            </div>

--- a/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
+++ b/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
@@ -72,7 +72,7 @@ const currentClientName = computed(() => {
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Create Project </span>
--- a/resources/js/packages/ui/src/Tag/TagCreateModal.vue
+++ b/resources/js/packages/ui/src/Tag/TagCreateModal.vue
@@ -30,7 +30,7 @@ useFocus(tagNameInput, { initialValue: true });
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Create Tags </span>
--- a/resources/js/packages/ui/src/TimeEntry/BreakCreateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/BreakCreateModal.vue
@@ -78,7 +78,7 @@ async function submit() {
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex items-center space-x-2 text-amber-600 dark:text-amber-400">
                <Coffee class="w-5 h-5" />
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
@@ -126,7 +126,7 @@ const billableProxy = computed({
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Create manual time entry </span>
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue
@@ -164,7 +164,7 @@ const typeProxy = computed({
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Edit time entry </span>
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue
@@ -147,7 +147,7 @@ const showBreakWarning = computed(
 </script>

 <template>
-    <DialogModal closeable :show="show" @close="show = false">
+    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
        <template #title>
            <div class="flex space-x-2">
                <span> Update {{ timeEntries.length }} time entries </span>