Combobox ClearTrigger not rendering

[joekrill]

🐛 Bug report

Combobox clear trigger's are not rendered (getClearTriggerProps().hidden is always true).

💥 Steps to reproduce

1. Enter text in the combobox
2. Notice that the clear trigger is not rendered, and the hidden prop returns from getClearTriggerProps() is true.

💻 Link to reproduction

Reproduction: https://stackblitz.com/edit/rn9pu28k

🧐 Expected behavior

When the combobox's input has a value, the clear trigger should render.

This happens whether inputValue is controller or not. It doesn't seem to matter whether inputValue has an initial value. And calling api.setInputValue() directly makes no difference.

🧭 Possible Solution

The current logic is:

 hidden: !context.get("value").length,

but I believe this should be checking "inputValue", not "value", i.e.:

 hidden: !context.get("inputValue").length,

🌍 System information

Software	Version(s)
Zag Version	1.27.1
Browser	Firefox 144.0.2, Safari 8.6
Operating System	macOS 15.6.1

📝 Additional information

[segunadebayo]

This is a tricky one; unfortunately, we can't change it at the moment. I will take note of this for the next major update.

Feel free to override the hidden attribute with the logic you prefer since you have access to this information. We might need to consider the effect of allowCustomValue as well

[joekrill]

Ok great, that works, thanks!

I'm actually using Chakra, so just in case anyone comes across this looking for a workaround, this is the code I used:

<Combobox.ClearTrigger hidden={inputValue.length === 0} />

where inputValue is the controlled inputValue prop value passed to Combobox.Root