InputMenu as autocomplete (dynamic options + create)

[lorado]

Environment

Nuxt UI 4.4.0

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.2.1

Reproduction

https://codesandbox.io/p/devbox/jovial-bash-nsf7yl

Description

There are couple issues I faced during working with InputMenu. Please let me know if I use component in a wrong way, or expect something wrong.

Here is situation and context: I have big amount of tags, so that putting them all in frontend caused huge performance issues as the amount of tags grew. So we decided to move fetching and filtering options to backend. So user type something, we get results from backend, serve it. Sometimes we don't have the tag user want to set, so there is always an option to add new tag.

I will reffer to reproduction in the next steps, so feel free to open it and follow along. I abstracted fetching data from backend by generating random options.

1. Issue with focus, when there were 0 options, and then > 0

To face the issue on reproduction:

• When we just loaded a page, there are 0 options available, as we didn't start the search yet. Because create is allowed, ComboboxItem for create is there.
• Now type one character. RekaUI due its automatic focus management will focus first available "Create" ComboboxItem. After a debounce, fetched options are set to :items, and rendered properly, BUT the focus remains on the "Create" ComboboxItem, because RekaUI doesn't react to options change.

In current situation user might see loaded options, assume the first option in the list would be selected, and he wants to pick exactly that, hits "enter" and then... well, onCreate() from "Create" ComboboxItem gets executed, which is definitely NOT expected behaviour. When you load more than 5 options, that "Create" ComboboxItem at the and of the list and not visible, while being in focus.

Possible solution:

1. React to changes in items prop, and if ignore-filter is true, call ComboboxRoot.highlightFirstItem()
2. In case option 1 is too offensive and potentially could break some other logic - expose ref to ComboboxRoot, so I can trigger highlightFirstItem() on my own. While this would give me ability to solve the issue, I think it is somewhat that should be handled on the library side.

2. Inconsistent call of onCreate

To face the issue on reproduction:

• In reproduction, options which are 'fetched' from backend randomly generated, but in search term is empty or its length is bigger than 3, it will return empty array (= no options)
• Type 3 characters, you will see 5 options available, and first is being in focus
• type 4th character. After debounce, we receive 0 options from 'backend'. "Create" ComboboxItem doesn't have focus (same issue as above, when options are updated, focus is not updated. And since we removed option which were in focus, there is now just no option in focus).
• When you hit "Enter" now, onCreate from Nuxt UI won't be triggered. Simply because this ComboboxItem is NOT in focus. Instead, TagsInputInput (in current case) will trigger its own context.onAddItem() which handles item creation only within Reka UI world. You will see UI on Reka getting updated - you see the option which was just added as a new tag. BUT, modelValue remains empty, onCreate from Nuxt UI doesn't get executed at all. But user thinks - he added the tag (because its visible). Search term remains also visible, and it feels already kinda buggy, bc I would expect it to be empty (after item was added)
• Now when you remove last character again in the input, you can some options again, now pick one of the options. Here it finally starts to work properly, modelValue gets updated, and UI also gets updated (the fake new value gets removed, in case you didn't try it out)
• Now while having at least one option selected, try to trigger this behaviour again, type 3 chars. wait for options to appear, then type 4th char, let the options disaapear, focus is NOT on the "Create" ComboboxItem, hit enter - now nothing happens, bc Reka UI throws an exception, as it figured out we have an object in modelValue, but onCreate provided just a string (search term) and there is no convertValue provided for Reka UI to be able to handle onAddTag in its context properly.

Possible solution:

1. Triggering highlightFirstItem() from the first issue would actually solve the issue, as onCreate would be triggered properly, and we can process search term as we need on our app.
2. I am not sure how and if its even possible (I didn't dive in that far), but maybe override/replace/stop triggering Reka's onAddTag

Additional context

No response

Logs