ui icon indicating copy to clipboard operation
ui copied to clipboard

How to Open a `uiMenu` in `UInputMenu` on Focus

Open alexi190 opened this issue 1 year ago • 1 comments

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.

Screenshot from 2024-08-18 18-51-41

<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 ?? []
    }

alexi190 avatar Aug 18 '24 13:08 alexi190

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] avatar Sep 18 '24 01:09 github-actions[bot]

This is now possible in v3 but unfortunately due to a limitation of Headless UI, it's not possible to do in v2.

benjamincanac avatar Oct 18 '24 14:10 benjamincanac