nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.13k stars 544 forks source link

UInputMenu property OPEN not working properly #2724

Open projct1 opened 3 days ago

projct1 commented 3 days ago

Environment

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.14.1592

Reproduction

Here is my dependencies:

  "dependencies": {
    "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@59d3375",
    "@vueuse/nuxt": "^11.3.0",
    "nuxt": "^3.14.1592",
    "nuxt-auth-sanctum": "^0.5.2",
    "tailwindcss": "4.0.0-alpha.34",
    "vue": "latest",
    "vue-router": "latest"
  }

Here is main template:

<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core'

const places = ref([])
const placeItems = ref([])
const placeOpen = ref(true)
const placeLoading = ref(false)
const placeSearch = useDebounceFn(async q => {
  if (q.length > 2) {
    placeLoading.value = true
    placeItems.value = await $fetch('http://localhost:85/api/v1/places', { query: { q } })
    placeOpen.value = true
    placeLoading.value = false
  }
}, 500)
</script>

<template>
  <UFormField label="Places" required>
    <UInputMenu name="places"
                v-model="places"
                v-model:open="placeOpen"
                :items="placeItems"
                :loading="placeLoading"
                :reset-search-term-on-blur="false"
                @focus="placeOpen = true"
                @update:search-term="placeSearch"
                value-key="id"
                label-key="name"
                icon="i-lucide-search"
                placeholder="Start typing..."
                class="w-full"
                multiple
                required />
  </UFormField>
</template>

Here is video demonstration :)

Description

placeOpen.value = true is not opening dropdown after fetching places.

projct1 commented 2 days ago

Dropdown menu appears if I manage to remove focus from the search field during loading https://skr.sh/vSq0bmQWaDV