Composing Combobox and TagInput together breaks tag navigation

[Jonas-C]

🐛 Bug report

When composing Combobox and TagInput together, the left and right arrows no longer allows one to navigate between available tags.

💥 Steps to reproduce

1. Add some tags.
2. Backspace to highlight the first tag.
3. Press left arrow. Nothing happens.

💻 Link to reproduction

https://zag-nextjs-git-changeset-release-main-chakra-ui.vercel.app/composition/combo-tags

🧐 Expected behavior

Left and right arrows should function as they usually do.

🌍 System information

Software	Version(s)
Zag Version	0.58.3
Browser	Firefox
Operating System	MacOS

📝 Additional information

Maybe you could expose a function for focusing the next/previous tag?
This also happens in the ArkUI plus example

[segunadebayo]

This is by design. If you close the combobox with the Esc key, you can navigate tags afterward

The combobox should consume the keyboard navigation while it's open. Otherwise, it becomes very difficult to manage when we add support for grid navigation in combobox (which need to support the left and right arrow keys)

I love the idea of adding focus methods to the tag's input APIs. Want to open a PR for this?

[segunadebayo]

Based on this logic here

zag/packages/machines/tags-input/src/tags-input.connect.ts

Lines 153 to 163 in 8f71381

	ArrowLeft() {
	if (isCombobox && isExpanded) return
	send("ARROW_LEFT")
	},
	ArrowRight(event) {
	if (state.context.highlightedTagId) {
	event.preventDefault()
	}
	if (isCombobox && isExpanded) return
	send("ARROW_RIGHT")
	},

You can see that we prevent the arrow navigation for the tags if the input acts as a combobox and it's open.

[Jonas-C]

Oh, gotcha! I can open a PR, but I'm not sure when I'll have time. Hopefully this weekend/early next week!

[Jonas-C]

Optionally, could we make this into a prop that controls whether the combobox consumes left/right arrows? I'm not too well versed with grid comboxes, but I'd assume that combining a TagInput and a Combobox is a more common scenario?