From fdbf88a9a60c55309ad81b667c4f486103d2de86 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 9 Dec 2024 16:33:57 +0100
Subject: [PATCH] fix selects inside of focus trap not working on click select

---
 playwright.config.ts                                         | 2 +-
 resources/js/packages/ui/src/Modal.vue                       | 4 +++-
 .../js/packages/ui/src/Project/ProjectBillableSelect.vue     | 5 ++++-
 resources/js/packages/ui/src/Project/ProjectCreateModal.vue  | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index db7068e0..514674e3 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
         trace: process.env.CI ? 'on-first-retry' : 'on',
     },
 
-    timeout: 10 * 1000,
+    timeout: 20 * 1000,
 
     /* Configure projects for major browsers */
     projects: [
diff --git a/resources/js/packages/ui/src/Modal.vue b/resources/js/packages/ui/src/Modal.vue
index 5c4b1f60..36c9b80c 100644
--- a/resources/js/packages/ui/src/Modal.vue
+++ b/resources/js/packages/ui/src/Modal.vue
@@ -78,7 +78,9 @@ const maxWidthClass = computed(() => {
 });
 
 const target = ref();
-const { activate, deactivate } = useFocusTrap(target);
+const { activate, deactivate } = useFocusTrap(target, {
+    allowOutsideClick: true,
+});
 watch(
     () => props.show,
     (value) => {
diff --git a/resources/js/packages/ui/src/Project/ProjectBillableSelect.vue b/resources/js/packages/ui/src/Project/ProjectBillableSelect.vue
index 172d106f..37006e5f 100644
--- a/resources/js/packages/ui/src/Project/ProjectBillableSelect.vue
+++ b/resources/js/packages/ui/src/Project/ProjectBillableSelect.vue
@@ -49,7 +49,10 @@ function getNameForKey(key: BillableKey | undefined) {
         :get-name-for-item="getNameFromItem"
         :items="options">
         <template #trigger>
-            <Badge size="xlarge" class="bg-input-background cursor-pointer">
+            <Badge
+                tag="button"
+                size="xlarge"
+                class="bg-input-background cursor-pointer">
                 <span>
                     {{ getNameForKey(model) }}
                 </span>
diff --git a/resources/js/packages/ui/src/Project/ProjectCreateModal.vue b/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
index c4fcdabf..fbf835a9 100644
--- a/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
+++ b/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
@@ -113,6 +113,7 @@ const currentClientName = computed(() => {
                         v-model="project.client_id">
                         <template #trigger>
                             <Badge
+                                tag="button"
                                 class="bg-input-background cursor-pointer hover:bg-tertiary"
                                 size="xlarge">
                                 <div class="flex items-center space-x-2">