Skip to content

Commit 408cb8f

Browse files
shweta2101cyrossignol
authored andcommitted
Extract closeDropdown; close on focusout
Refactor dropdown closing logic by extracting repeated code into a closeDropdown() helper. Use this helper from the Escape key handler and the outside-click handler to reduce duplication. Add an @focusout handler (onFocusOut) on the root element to close the dropdown when focus moves outside the picker (checks relatedTarget), ensuring consistent behavior for focus-based dismissals.
1 parent 3f113c4 commit 408cb8f

1 file changed

Lines changed: 17 additions & 13 deletions

File tree

components/ProjectGroupPicker.vue

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="position-relative project-group-picker" ref="pickerRef">
2+
<div class="position-relative project-group-picker" ref="pickerRef" @focusout="onFocusOut">
33
<input
44
v-model="searchText"
55
type="text"
@@ -261,11 +261,7 @@ const onKeydown = (e: KeyboardEvent) => {
261261
}
262262
} else if (e.key === 'Escape') {
263263
e.preventDefault()
264-
isOpen.value = false
265-
const pg = projectGroups.value.find(p => p.id === model.value)
266-
const name = pg?.name ?? selectedGroupName.value
267-
searchText.value = name
268-
if (pg) selectedGroupName.value = name
264+
closeDropdown()
269265
}
270266
}
271267
@@ -275,15 +271,23 @@ const applyCachedName = () => {
275271
selectedGroupName.value = cached
276272
}
277273
274+
const closeDropdown = () => {
275+
isOpen.value = false
276+
const pg = projectGroups.value.find(p => p.id === model.value)
277+
const name = pg?.name ?? selectedGroupName.value
278+
searchText.value = name
279+
if (pg) selectedGroupName.value = name
280+
}
281+
278282
const handleClickOutside = (event: MouseEvent) => {
279283
if (pickerRef.value && !pickerRef.value.contains(event.target as Node)) {
280-
if (isOpen.value) {
281-
isOpen.value = false
282-
const pg = projectGroups.value.find(p => p.id === model.value)
283-
const name = pg?.name ?? selectedGroupName.value
284-
searchText.value = name
285-
if (pg) selectedGroupName.value = name
286-
}
284+
if (isOpen.value) closeDropdown()
285+
}
286+
}
287+
288+
const onFocusOut = (e: FocusEvent) => {
289+
if (!pickerRef.value?.contains(e.relatedTarget as Node)) {
290+
if (isOpen.value) closeDropdown()
287291
}
288292
}
289293

0 commit comments

Comments
 (0)