N
Nuxt•3w ago
joocy

UInputMenu Focus

Why doesn't this shortcut / to focus on UInputMenu work? 
<script setup lang="ts">
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const inputRef = ref<HTMLInputElement | null>(null)

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])

defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      inputRef.value?.focus()
    }
  }
})
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <UInputMenu
        ref="inputRef"
        v-model="selected"
        v-model:open="filterBuilderMenuOpen"
        :options="items"
        placeholder="Filter..."
        autofocus
        @focus="filterBuilderMenuOpen = true"
        @keydown.esc="$event.target.blur()"
      >
        <template #trailing>
          <UKbd>/</UKbd>
        </template>
      </UInputMenu>
    </div>
  </div>
</template>
<script setup lang="ts">
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const inputRef = ref<HTMLInputElement | null>(null)

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])

defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      inputRef.value?.focus()
    }
  }
})
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <UInputMenu
        ref="inputRef"
        v-model="selected"
        v-model:open="filterBuilderMenuOpen"
        :options="items"
        placeholder="Filter..."
        autofocus
        @focus="filterBuilderMenuOpen = true"
        @keydown.esc="$event.target.blur()"
      >
        <template #trailing>
          <UKbd>/</UKbd>
        </template>
      </UInputMenu>
    </div>
  </div>
</template>
5 Replies
kapa.ai
kapa.ai•3w ago
Hi @joocy. 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 provided knowledge sources and your question, I can offer some insights on why the shortcut to focus on UInputMenu might not be working as expected. However, it's important to note that the specific issue you're encountering isn't directly addressed in the given information. Let's break down the problem and suggest some potential solutions: 1. Referencing the input: The inputRef you're trying to focus on is not connected to the UInputMenu component in your template. UInputMenu doesn't expose a direct ref to its internal input element. 2. Shortcut definition: Your shortcut definition looks correct according to the Shortcuts documentation (https://ui.nuxt.com/getting-started/shortcuts). However, you might want to consider adding the usingInput option to ensure it works even when other inputs are focused: 
defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      // Focus logic here
    }
  }
})
defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      // Focus logic here
    }
  }
})
3. Focusing the UInputMenu: Instead of trying to focus a ref that isn't connected, you could try to programmatically open the menu and then focus it. The InputMenu documentation (https://ui.nuxt.com/components/input-menu#control-the-query) shows that you can control the open state and query of the component: 
<template>
  <UInputMenu
    v-model="selected"
    v-model:open="filterBuilderMenuOpen"
    v-model:query="query"
    :options="items"
    placeholder="Filter..."
    autofocus
    @focus="filterBuilderMenuOpen = true"
    @keydown.esc="$event.target.blur()"
  >
    <template #trailing>
      <UKbd>/</UKbd>
    </template>
  </UInputMenu>
</template>

<script setup>
const query = ref('')
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      filterBuilderMenuOpen.value = true
      query.value = ''
      // You might need to use nextTick here to ensure the input is rendered
      nextTick(() => {
        // Try to focus the input (this might not work directly)
        document.querySelector('input[type="text"]')?.focus()
      })
    }
  }
})
</script>
<template>
  <UInputMenu
    v-model="selected"
    v-model:open="filterBuilderMenuOpen"
    v-model:query="query"
    :options="items"
    placeholder="Filter..."
    autofocus
    @focus="filterBuilderMenuOpen = true"
    @keydown.esc="$event.target.blur()"
  >
    <template #trailing>
      <UKbd>/</UKbd>
    </template>
  </UInputMenu>
</template>

<script setup>
const query = ref('')
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      filterBuilderMenuOpen.value = true
      query.value = ''
      // You might need to use nextTick here to ensure the input is rendered
      nextTick(() => {
        // Try to focus the input (this might not work directly)
        document.querySelector('input[type="text"]')?.focus()
      })
    }
  }
})
</script>
4. Component limitations: It's possible that the UInputMenu component doesn't expose a straightforward way to programmatically focus its input. The documentation doesn't mention a specific method for this. 5. Alternative approach: If focusing proves difficult, you could consider using the shortcut to open the menu and set an initial query, which might provide a similar user experience: 
defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      filterBuilderMenuOpen.value = true
      query.value = ''
    }
  }
})
defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      filterBuilderMenuOpen.value = true
      query.value = ''
    }
  }
})
Given the limitations in directly focusing the UInputMenu's input, you might need to explore alternative approaches or consider reaching out to the Nuxt UI maintainers for more specific guidance on programmatically focusing the UInputMenu component. InputMenu documentation (https://ui.nuxt.com/components/input-menu#control-the-query) and Shortcuts documentation (https://ui.nuxt.com/getting-started/shortcuts) provide the basis for these suggestions, but they don't directly address the specific issue you're facing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@803380425875390494> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
joocy
joocyOP•3w ago
inputRef.value?.focus is not a function @kapa.ai inputRef.value?.focus is not a function
kapa.ai
kapa.ai•3w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information provided in the knowledge sources and our previous conversation, I can explain why you're encountering the "inputRef.value?.focus is not a function" error. The issue stems from the fact that the UInputMenu component doesn't expose a direct reference to its internal input element. In your previous code snippet, you defined inputRef but didn't connect it to the UInputMenu component. As a result, inputRef.value is likely null, which explains why .focus() is not a function. To address this issue, we need to take a different approach. The UInputMenu component doesn't provide a straightforward way to programmatically focus its input. Instead, we can try to control the component's state to achieve a similar effect. Here's a revised approach based on the InputMenu documentation (https://ui.nuxt.com/components/input-menu#control-the-query): 
<script setup lang="ts">
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const query = ref('')

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])

defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      filterBuilderMenuOpen.value = true
      query.value = ''
    }
  }
})
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <UInputMenu
        v-model="selected"
        v-model:open="filterBuilderMenuOpen"
        v-model:query="query"
        :options="items"
        placeholder="Filter..."
        autofocus
        @focus="filterBuilderMenuOpen = true"
        @keydown.esc="$event.target.blur()"
      >
        <template #trailing>
          <UKbd>/</UKbd>
        </template>
      </UInputMenu>
    </div>
  </div>
</template>
<script setup lang="ts">
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const query = ref('')

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])

defineShortcuts({
  '/': {
    usingInput: true,
    handler: () => {
      console.log('Shortcut triggered')
      filterBuilderMenuOpen.value = true
      query.value = ''
    }
  }
})
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <UInputMenu
        v-model="selected"
        v-model:open="filterBuilderMenuOpen"
        v-model:query="query"
        :options="items"
        placeholder="Filter..."
        autofocus
        @focus="filterBuilderMenuOpen = true"
        @keydown.esc="$event.target.blur()"
      >
        <template #trailing>
          <UKbd>/</UKbd>
        </template>
      </UInputMenu>
    </div>
  </div>
</template>
In this revised version: 1. We've removed the inputRef as it's not applicable to UInputMenu. 2. We've added a query ref to control the input's value. 3. In the shortcut handler, instead of trying to focus the input directly, we: - Open the menu by setting filterBuilderMenuOpen.value = true - Clear the query by setting query.value = '' This approach should open the menu and clear the input when the '/' key is pressed, which might provide a similar user experience to focusing the input. Remember, as mentioned in the Shortcuts documentation (https://ui.nuxt.com/getting-started/shortcuts), we've added the usingInput: true option to ensure the shortcut works even when other inputs are focused. If you need more direct control over the input element, you might need to consider using a different component or reaching out to the Nuxt UI maintainers for guidance on how to access the internal input of UInputMenu. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@803380425875390494> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Want results from more Discord servers?
Add your server