ui
ui copied to clipboard
How to Open a `uiMenu` in `UInputMenu` on Focus
Description
i am trying to implement auto suggestion search. while typing i get the suggestions list (uiMenu) but if i click outside the uiMenu and then again focus or click on the input the ui menu does not shows. My question is how to trigger the uiMenu?
Demo image of the input is focused but uiMenu not showing.
<UInputMenu v-model="selected" :search="search" :loading="loading" placeholder="Search..."
color="primary" v-model:query="query" leading-icon="i-heroicons-magnifying-glass-20-solid"
option-attribute="name" by="id" :ui-menu="{ height: 'max-h-full' }" @update:selected="handleSelection"
class="ml-32 mr-28 flex-1" size="xl" :search-lazy="true" :popper="{
arrow: false,
locked: false,
scroll: false,
adaptive: true,
strategy: 'absolute',
}" @focus="onFocus">
<template #trailing>
<UButton v-if="query !== ''" color="gray" variant="link" icon="i-heroicons-x-mark-20-solid" :padded="false"
@click="clearSearch()" />
</template>
<template #option="{ option: search }">
<NuxtLink to="test">
<h4 class="truncate p-2 font-semibold">{{ search.name }}</h4>
</NuxtLink>
</template>
</UInputMenu>
async function search(q: string): Promise<EsAutoSuggestion[]> {
if (q == null) {
return [];
}
loading.value = true;
const searchSuggestions = await searchStore.searchAutoSuggestion(q)
if (!searchSuggestions) {
loading.value = false;
return []
}
loading.value = false;
return searchSuggestions ?? []
}
This issue is stale because it has been open for 30 days with no activity.
This is now possible in v3 but unfortunately due to a limitation of Headless UI, it's not possible to do in v2.