arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-02 13:17:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(CommandPalette): activate first option after async search (#981)

Browse Source
This commit is contained in:
Florian Zdrada
2023-11-16 17:50:37 +01:00
committed by GitHub
parent e1e5fa902b
commit a97593985c
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -189,7 +189,7 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
if (props.autoselect) { if (props.autoselect) {
activateFirstOption() activateNextOption()
} }
}) })
@@ -282,16 +282,14 @@ export default defineComponent({
})) }))
isLoading.value = false isLoading.value = false
activateFirstOption()
}, props.debounce) }, props.debounce)
watch(query, () => { watch(query, () => {
debouncedSearch() debouncedSearch()
// Select first item on search changes activateFirstOption()
setTimeout(() => {
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
}, 0)
}) })
const iconName = computed(() => { const iconName = computed(() => {
@@ -315,9 +313,15 @@ export default defineComponent({
// Methods // Methods
function activateFirstOption () { function activateFirstOption () {
// hack combobox by using keyboard event
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
setTimeout(() => { setTimeout(() => {
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
}, 0)
}
function activateNextOption () {
setTimeout(() => {
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' })) comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}, 0) }, 0)
} }