Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UInputMenu property OPEN not working properly #2724

Open
projct1 opened this issue Nov 22, 2024 · 1 comment
Open

UInputMenu property OPEN not working properly #2724

projct1 opened this issue Nov 22, 2024 · 1 comment
Labels
bug Something isn't working triage v3 #1289

Comments

@projct1
Copy link

projct1 commented Nov 22, 2024

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 projct1 added bug Something isn't working triage v3 #1289 labels Nov 22, 2024
@projct1
Copy link
Author

projct1 commented Nov 23, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triage v3 #1289
Projects
None yet
Development

No branches or pull requests

1 participant