nuxt / nuxt/ui

Add emit to InputMenu that returns false when no matching items exist

Open
#6,479 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Package

v4.x

Description

The @update:open event on the InputMenu passes the value true whenever the combobox is open. However, when :content="{ hideWhenEmpty: true }" is set, this doesn't match the actual visual state of the component because it returns true even where there are no matching items. This makes it very difficult to track when the combobox is actually visible to the user which is especially annoying when using mode="autocomplete".

Additional context

To give a use case for this: I have a list of autocompletes and when pressing enter, a new autocomplete is created below the current one (basically a to-do list). However, I don't want to create a new autocomplete when the combox is open since pressing enter with the combobox open, already triggers an action which is applying the highlighted value from the combobox. For me to be able to differentiate between these two cases, it would be very convenient to be able to track the actual open state of the combobox that matches what the user actually sees.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the InputMenu component's existing @update:open handling and how content.hideWhenEmpty affects visibility, then inspect the component's tests if present. Add an emit that reports false when autocomplete filtering leaves no matching items, while preserving the current open behavior otherwise; done means consumers can distinguish a visually hidden combobox from one with matching items.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.