julien/andon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(projects): open autocomplete on click/type, not focus

Browse Source 
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.
This commit is contained in:
Julien Calixte
2026-05-28 00:07:34 +02:00
parent a894e3715d
commit 7f655009ac
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/ProjectAutocomplete.vue
View File

@@ -66,7 +66,7 @@ async function create() {
data-test="project-input" data-test="project-input"
placeholder="Project…" placeholder="Project…"
autocomplete="off" autocomplete="off"
@focus="open = true" @click="open = true"
@input="open = true" @input="open = true"
> >
<ul v-if="open && (filtered.length || canCreate)" class="options"> <ul v-if="open && (filtered.length || canCreate)" class="options">

2
tests/defect-form.nuxt.spec.ts
View File

@@ -26,7 +26,7 @@ type Wrapper = Awaited<ReturnType<typeof mountSuspended>>
const dialogEl = (w: Wrapper) => w.find('dialog').element as HTMLDialogElement const dialogEl = (w: Wrapper) => w.find('dialog').element as HTMLDialogElement
async function pickProject(wrapper: Wrapper) { 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') await wrapper.find('[data-test="project-option"]').trigger('click')
} }

4
tests/project-autocomplete.nuxt.spec.ts
View File

@@ -41,7 +41,7 @@ describe('ProjectAutocomplete', () => {
const wrapper = await mountSuspended(ProjectAutocomplete) const wrapper = await mountSuspended(ProjectAutocomplete)
await flushPromises() await flushPromises()
await wrapper.find('[data-test="project-input"]').trigger('focus') await wrapper.find('[data-test="project-input"]').trigger('click')
const names = wrapper const names = wrapper
.findAll('[data-test="project-option"]') .findAll('[data-test="project-option"]')
.map((el) => el.text()) .map((el) => el.text())
@@ -84,7 +84,7 @@ describe('ProjectAutocomplete', () => {
// Persisted to the store and now selectable without reload — reopening the // Persisted to the store and now selectable without reload — reopening the
// list (the create flow closes it) shows the new project. // list (the create flow closes it) shows the new project.
expect(store.map((p) => p.name)).toContain('Initech') 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 const names = wrapper
.findAll('[data-test="project-option"]') .findAll('[data-test="project-option"]')
.map((el) => el.text()) .map((el) => el.text())