N
Nuxt•2mo ago
meowcat.32

nuxt ui inputmenu breaks tab behavior!

<script setup lang="ts">
const searchTerm = ref('');

const { data: items, status } = await useLazyFetch('/ac', {
  query: { query: searchTerm },
  $fetch: useNuxtApp().$api,
  transform: (data) => {
    return data.map((item) => ({
      label: item.name,
      value: item.id
    }));
  }
});
</script>

<template>
  <UInputMenu
    v-model:search-term="searchTerm"
    :items="items || []"
    :loading="false"
    ignore-filter
    placeholder="Start typing..."
  >
  </UInputMenu>
</template>
<script setup lang="ts">
const searchTerm = ref('');

const { data: items, status } = await useLazyFetch('/ac', {
  query: { query: searchTerm },
  $fetch: useNuxtApp().$api,
  transform: (data) => {
    return data.map((item) => ({
      label: item.name,
      value: item.id
    }));
  }
});
</script>

<template>
  <UInputMenu
    v-model:search-term="searchTerm"
    :items="items || []"
    :loading="false"
    ignore-filter
    placeholder="Start typing..."
  >
  </UInputMenu>
</template>
when i type something in and then press tab, it empties the search-tem so it queries the api for a empty string, which returns an empty array unfocusing the search results!
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @meowcat.32. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I don't have specific information about the behavior you're describing with the UInputMenu component and tab key interaction. The documentation doesn't mention this particular issue or how the component handles tab key presses. However, I can provide some insights based on the available information: 1. The UInputMenu component is part of the Nuxt UI library, as described in InputMenu documentation. 2. The component supports a v-model:query prop to control the search query, which might be related to your v-model:search-term usage. According to the Control the query section, you can use this to manage the search query state. 3. The component also supports async search functionality, as shown in the Async search section, which seems similar to what you're trying to achieve with your useLazyFetch call. Given that the specific behavior you're experiencing isn't documented, it might be a bug or an unintended interaction. Here are a few suggestions: 1. Check if there's a more recent version of the Nuxt UI library that might have fixed this issue. 2. Consider opening an issue on the Nuxt UI GitHub repository to report this behavior. 3. You might want to try using the @keydown.tab event handler on the UInputMenu component to prevent the default tab behavior and maintain the search term. If you need a definitive solution, I recommend reaching out to the Nuxt UI maintainers or checking their GitHub issues for similar problems or workarounds. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1331083366279417886> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
meowcat.32
meowcat.32OP•2mo ago
it happens in the example as well, so i guess not my fault

Did you find this page helpful?