From 7f655009ac4214ddbe1c431b0a5ca22799fa517c Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Thu, 28 May 2026 00:07:34 +0200
Subject: [PATCH] fix(projects): open autocomplete on click/type, not focus

The dialog autofocuses the project input on open; opening the dropdown on
focus made it spring open with no user interaction. Open on click or typing
instead, so the field is type-ready on open without showing the list.
---
 app/components/ProjectAutocomplete.vue  | 2 +-
 tests/defect-form.nuxt.spec.ts          | 2 +-
 tests/project-autocomplete.nuxt.spec.ts | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/ProjectAutocomplete.vue b/app/components/ProjectAutocomplete.vue
index f71fcbf..32fc657 100644
--- a/app/components/ProjectAutocomplete.vue
+++ b/app/components/ProjectAutocomplete.vue
@@ -66,7 +66,7 @@ async function create() {
       data-test="project-input"
       placeholder="Project…"
       autocomplete="off"
-      @focus="open = true"
+      @click="open = true"
       @input="open = true"
     >
     <ul v-if="open && (filtered.length || canCreate)" class="options">
diff --git a/tests/defect-form.nuxt.spec.ts b/tests/defect-form.nuxt.spec.ts
index 7c204f7..3582cf4 100644
--- a/tests/defect-form.nuxt.spec.ts
+++ b/tests/defect-form.nuxt.spec.ts
@@ -26,7 +26,7 @@ type Wrapper = Awaited<ReturnType<typeof mountSuspended>>
 const dialogEl = (w: Wrapper) => w.find('dialog').element as HTMLDialogElement
 
 async function pickProject(wrapper: Wrapper) {
-  await wrapper.find('[data-test="project-input"]').trigger('focus')
+  await wrapper.find('[data-test="project-input"]').trigger('click')
   await wrapper.find('[data-test="project-option"]').trigger('click')
 }
 
diff --git a/tests/project-autocomplete.nuxt.spec.ts b/tests/project-autocomplete.nuxt.spec.ts
index ac77f45..a6344dd 100644
--- a/tests/project-autocomplete.nuxt.spec.ts
+++ b/tests/project-autocomplete.nuxt.spec.ts
@@ -41,7 +41,7 @@ describe('ProjectAutocomplete', () => {
     const wrapper = await mountSuspended(ProjectAutocomplete)
     await flushPromises()
 
-    await wrapper.find('[data-test="project-input"]').trigger('focus')
+    await wrapper.find('[data-test="project-input"]').trigger('click')
     const names = wrapper
       .findAll('[data-test="project-option"]')
       .map((el) => el.text())
@@ -84,7 +84,7 @@ describe('ProjectAutocomplete', () => {
     // Persisted to the store and now selectable without reload — reopening the
     // list (the create flow closes it) shows the new project.
     expect(store.map((p) => p.name)).toContain('Initech')
-    await wrapper.find('[data-test="project-input"]').trigger('focus')
+    await wrapper.find('[data-test="project-input"]').trigger('click')
     const names = wrapper
       .findAll('[data-test="project-option"]')
       .map((el) => el.text())