From c1dce209027ab0792b649d43e38122c4cb2c957e Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Fri, 4 Sep 2026 17:33:01 +0200
Subject: [PATCH] fix cmd+enter submit shortcut on modals #1238

---
 e2e/time.spec.ts                              | 41 +++++++++++++++++++
 .../Common/Client/ClientCreateModal.vue       |  2 +-
 .../Common/Client/ClientEditModal.vue         |  2 +-
 .../Common/Member/MemberEditModal.vue         |  2 +-
 .../Common/Member/MemberInviteModal.vue       |  2 +-
 .../Common/Project/ProjectEditModal.vue       |  2 +-
 .../ProjectMemberCreateModal.vue              |  2 +-
 .../ProjectMember/ProjectMemberEditModal.vue  |  2 +-
 .../Common/Report/ReportCreateModal.vue       |  2 +-
 .../Common/Report/ReportEditModal.vue         |  2 +-
 .../js/Components/Common/Tag/TagEditModal.vue |  2 +-
 .../Common/Task/TaskCreateModal.vue           |  2 +-
 .../Components/Common/Task/TaskEditModal.vue  |  2 +-
 .../Timesheet/BreakPlacementModal.vue         |  2 +-
 resources/js/packages/ui/src/DialogModal.vue  |  9 +++-
 resources/js/packages/ui/src/Modal.vue        | 25 +++++++++--
 .../ui/src/Project/ProjectCreateModal.vue     |  2 +-
 .../js/packages/ui/src/Tag/TagCreateModal.vue |  2 +-
 .../ui/src/TimeEntry/BreakCreateModal.vue     |  2 +-
 .../ui/src/TimeEntry/TimeEntryCreateModal.vue |  2 +-
 .../ui/src/TimeEntry/TimeEntryEditModal.vue   |  2 +-
 .../TimeEntry/TimeEntryMassUpdateModal.vue    |  2 +-
 22 files changed, 89 insertions(+), 24 deletions(-)

diff --git a/e2e/time.spec.ts b/e2e/time.spec.ts
index 486f1c88..f3fc8910 100644
--- a/e2e/time.spec.ts
+++ b/e2e/time.spec.ts
@@ -1579,6 +1579,47 @@ test('test that project selection works in create modal', async ({ page, ctx })
     expect(createBody.data.project_id).not.toBeNull();
 });
 
+test('test that ctrl+enter submits the create modal after selecting a project via keyboard', async ({
+    page,
+    ctx,
+}) => {
+    // Regression test for https://github.com/solidtime-io/solidtime/issues/1238
+    const projectName = 'Keyboard Submit Project ' + Math.floor(1 + Math.random() * 10000);
+    await createProjectViaApi(ctx, { name: projectName });
+
+    await goToTimeOverview(page);
+
+    await page.getByRole('button', { name: 'Time entry actions' }).click();
+    await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
+    await expect(page.getByRole('dialog')).toBeVisible();
+
+    // Fill the description, then move to the project dropdown and select a project purely via keyboard
+    const description = page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
+    await description.fill('Keyboard submit test');
+    await description.press('Tab');
+    await expect(
+        page.getByRole('dialog').getByRole('button', { name: 'No Project' })
+    ).toBeFocused();
+    await page.keyboard.press('Enter');
+    await page.getByTestId('client_dropdown_search').fill(projectName);
+    await expect(page.getByRole('option', { name: projectName })).toBeVisible();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('dialog').getByRole('button', { name: projectName })).toBeVisible();
+
+    // Ctrl+Enter must submit even though focus is no longer on the description input
+    const [createResponse] = await Promise.all([
+        page.waitForResponse(
+            (response) => response.url().includes('/time-entries') && response.status() === 201
+        ),
+        page.keyboard.press('Control+Enter'),
+    ]);
+    const createBody = await createResponse.json();
+    expect(createBody.data.description).toBe('Keyboard submit test');
+    expect(createBody.data.project_id).not.toBeNull();
+    await expect(page.getByRole('dialog')).toBeHidden();
+    await expect(page.getByText('Keyboard submit test')).toBeVisible();
+});
+
 test('test that tag selection works in create modal', async ({ page }) => {
     await goToTimeOverview(page);
 
diff --git a/resources/js/Components/Common/Client/ClientCreateModal.vue b/resources/js/Components/Common/Client/ClientCreateModal.vue
index 6ce70036..5e71f273 100644
--- 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>
diff --git a/resources/js/Components/Common/Client/ClientEditModal.vue b/resources/js/Components/Common/Client/ClientEditModal.vue
index 3cf1ffe0..bd983b5a 100644
--- 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>
diff --git a/resources/js/Components/Common/Member/MemberEditModal.vue b/resources/js/Components/Common/Member/MemberEditModal.vue
index 6dd99555..c0e04605 100644
--- 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>
diff --git a/resources/js/Components/Common/Member/MemberInviteModal.vue b/resources/js/Components/Common/Member/MemberInviteModal.vue
index 569a5a02..b1e77fdb 100644
--- 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>
diff --git a/resources/js/Components/Common/Project/ProjectEditModal.vue b/resources/js/Components/Common/Project/ProjectEditModal.vue
index 52cead30..34ad6b6a 100644
--- 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>
diff --git a/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue b/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue
index f5c74e85..5c5dbb6b 100644
--- 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>
diff --git a/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue b/resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue
index c4d20d15..9fc19699 100644
--- 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>
diff --git a/resources/js/Components/Common/Report/ReportCreateModal.vue b/resources/js/Components/Common/Report/ReportCreateModal.vue
index 5a3acdf0..042c5184 100644
--- 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>
diff --git a/resources/js/Components/Common/Report/ReportEditModal.vue b/resources/js/Components/Common/Report/ReportEditModal.vue
index 55057f35..b6ce492e 100644
--- 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>
diff --git a/resources/js/Components/Common/Tag/TagEditModal.vue b/resources/js/Components/Common/Tag/TagEditModal.vue
index bd4d0083..daa542a5 100644
--- 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>
diff --git a/resources/js/Components/Common/Task/TaskCreateModal.vue b/resources/js/Components/Common/Task/TaskCreateModal.vue
index 3a47bc57..a619980e 100644
--- 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>
diff --git a/resources/js/Components/Common/Task/TaskEditModal.vue b/resources/js/Components/Common/Task/TaskEditModal.vue
index 4432df2c..86d21fe7 100644
--- 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>
diff --git a/resources/js/Components/Timesheet/BreakPlacementModal.vue b/resources/js/Components/Timesheet/BreakPlacementModal.vue
index 724d27f1..4446103c 100644
--- 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" />
diff --git a/resources/js/packages/ui/src/DialogModal.vue b/resources/js/packages/ui/src/DialogModal.vue
index a2c714c1..517d1273 100644
--- 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" />
diff --git a/resources/js/packages/ui/src/Modal.vue b/resources/js/packages/ui/src/Modal.vue
index fbb536a4..e2e6efd8 100644
--- 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>
 
diff --git a/resources/js/packages/ui/src/Project/ProjectCreateModal.vue b/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
index e708d092..60717de8 100644
--- 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>
diff --git a/resources/js/packages/ui/src/Tag/TagCreateModal.vue b/resources/js/packages/ui/src/Tag/TagCreateModal.vue
index 0ec659e4..7fbf5787 100644
--- 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>
diff --git a/resources/js/packages/ui/src/TimeEntry/BreakCreateModal.vue b/resources/js/packages/ui/src/TimeEntry/BreakCreateModal.vue
index 19c7f86a..0b7e28c7 100644
--- 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" />
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
index ff8cc1cb..0b094afd 100644
--- 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>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue
index e4aacc93..e22fc4a6 100644
--- 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>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue
index 16a2f530..9cef6811 100644
--- 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>