fix selects inside of focus trap not working on click select

Author: Onatcer

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: [

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) => {

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>

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">