fix(InputMenu): stop adding new chip in ui in case not create mode

[al1maher]

🔗 Linked issue

Resolves #6760

❓ 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

Stop creating a new chip in UI when the user searches and press Enter

📝 Checklist

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

[coderabbitai]

📝 Walkthrough

Walkthrough

InputMenu.vue now intercepts Enter in the multi-tag input when createItem is disabled, preventing raw search text from being added as a chip. The template wires the Enter key event to the new handler.

Estimated code review effort: 1 (Trivial) | ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title matches the main fix: preventing new chips from being added in non-create mode.
Description check	✅ Passed	The description clearly describes the bug fix and the Enter-key behavior change in InputMenu.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

src/runtime/components/InputMenu.vue (1)

551-560: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add a regression test for disabled item creation.

Please cover Enter with multiple: true, a non-empty search term, and createItem: false, asserting that neither a chip nor an update:modelValue event is produced. Also verify that enabled createItem behavior remains unchanged.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/runtime/components/InputMenu.vue` around lines 551 - 560, Add regression
coverage for onTagInputKeydown in the InputMenu tests: with multiple enabled, a
non-empty search term, and createItem false, pressing Enter must produce neither
a chip nor an update:modelValue event. Add a corresponding createItem true case
to confirm Enter still creates the tag and emits the expected model update.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/runtime/components/InputMenu.vue`:
- Around line 551-560: Add regression coverage for onTagInputKeydown in the
InputMenu tests: with multiple enabled, a non-empty search term, and createItem
false, pressing Enter must produce neither a chip nor an update:modelValue
event. Add a corresponding createItem true case to confirm Enter still creates
the tag and emits the expected model update.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7fa69814-cbac-4d32-800e-d2a259aeb798

📥 Commits

Reviewing files that changed from the base of the PR and between 34554bf and 3c736a3.

📒 Files selected for processing (1)

• src/runtime/components/InputMenu.vue

[pkg-pr-new]

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

commit: 3c736a3

[benjamincanac]

Thanks @al1maher! I don't think createItem is the right check though, the chip is still there with createItem: true and the menu closed. And preventing every Enter breaks form submission inside a UForm.

I think I would use searchTerm instead:

Suggested change

	function onTagInputKeydown(e: KeyboardEvent) {
	if (e.key !== 'Enter') return
	// reka-ui's TagsInputRoot adds the raw search text as a tag on Enter regardless of
	// whether it matches a real item or createItem is enabled. Block that so
	// we never render a chip that isn't reflected in modelValue.
	if (!props.createItem) {
	e.preventDefault()
	}
	}
	function onTagsInputKeydown(event: KeyboardEvent) {
	if (event.isComposing || !searchTerm.value) {
	return
	}
	event.preventDefault()
	}

What do you think?

[al1maher]

I think your approach is more correct, I made it that way as I was focusing on not breaking the create functionality but I think your solution is more robust