fix(InputMenu/SelectMenu): prevent unintended item creation and improve focus handling

[lorado]

🔗 Linked issue

Resolves #5974

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Based on the issues described in #5974, following fixes were applied:

• InputMenu
  • Stop propagation of the "Enter"-key event on the TagsInputInput preventing calling default Reka behaviour, which triggers an internal onAddValue, which isn't connected in any way to Nuxt UI
  • Watch changes in items prop, and in filters are ignored and creation is enabled, trigger to select first item in the dropdown.
• SelectMenu
  • Similar to InputMenu, SelectMenu had similar issue with focus in Combobox
• Added additional examples of usage to playground, which covers issues which are fixed now.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

I don't think there is a need to write anything to documentation?

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds internal combobox root refs and post-flush watches in InputMenu.vue and SelectMenu.vue to call highlightFirstItem() when props.items change and ignoreFilter is true with a createItem present. Introduces an onInputEnter handler wired to Enter key events to avoid unintended creation when a highlighted item exists. Playground pages add parallel "create" flows: new searchTermCreate and debounced variants, lazy useFetch calls producing usersCreate with avatar transforms, statusCreate loading flags, and onUserCreate handlers; templates include create-enabled inputs/selects with multiple selection.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, explaining the specific fixes applied to InputMenu and SelectMenu, including the issues addressed and solutions implemented.
Linked Issues check	✅ Passed	The PR addresses all coding requirements from issue #5974: watches items prop changes to call highlightFirstItem() when ignoreFilter is true and createItem exists [#5974], implements onInputEnter to skip create when items exist with focus outside combobox [#5974], and applies similar fixes to SelectMenu [#5974].
Out of Scope Changes check	✅ Passed	All changes directly address the issues in #5974: watching items prop, implementing focus management via highlightFirstItem(), handling Enter key behavior, and adding playground examples covering the fixed scenarios.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'fix(InputMenu/SelectMenu): prevent unintended item creation and improve focus handling' accurately describes the main changes: fixing focus and creation handling in both InputMenu and SelectMenu components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5986

commit: 7d6b245

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/runtime/components/SelectMenu.vue`:
- Around line 487-492: The onInputEnter handler currently calls onCreate(e)
whenever there is no highlighted element regardless of whether creation is
enabled; update onInputEnter to first check props.createItem (or an equivalent
create-enabled flag) and only call onCreate(e) when props.createItem is truthy
and comboboxRootRef.value?.highlightedElement is falsy, so pressing Enter won’t
emit a create event when create is disabled; refer to the onInputEnter function,
the onCreate handler, and props.createItem to implement this guard.

[lorado]

Just realised there was still a not intuitive situation, when focus was in the input-tag, and user moved the focus out of the CheckboxItem, added last failsafe so that on "Enter"-key hit onCreate function still called, but only if there are no items available. If there are any items available, but focus is out of the combobox, I decided to simply bring the focus back to the first option available.

Let me know if there is any need for change.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/runtime/components/InputMenu.vue`:
- Around line 503-516: The onInputEnter function currently calls onCreate
unconditionally when there are no items; update it to guard against unwanted
creation by checking the creation flag (e.g., props.createItem or whichever prop
enables creation) before invoking onCreate. In onInputEnter, after the existing
combobox focus and items checks, add a conditional that ensures props.createItem
is truthy (or the appropriate creation-enabled prop) and only then call
onCreate(e); otherwise do nothing (or return). This change should reference
onInputEnter, onCreate, comboboxRootRef, and props.items to locate and fix the
behavior.