[combobox] ComboboxClear sets value to undefined which causes issues if controlled

[psiho]

Feature request

Summary

Currently, clicking ComboboxClear sets value to undefined which causes issues if it is controlled component, React complains. Trying simple onChange conversion to empty string works for the error, but now ComboboxClear icon never goes away (I guess it checks if value === undefined to hide).

Workaround is to conditionally render ComboboxClear. But I feel adding all this extra checks and conversions is not optimal. I'm not sure what would be the best way to resolve this. Simplest would be maybe to make ComboboxClear icon visibility to also check for empty string, not just undefined.

Or maybe for ComboboxClear to set value to empty string instead? Not sure how this would affect other things, but undefined and controlled fields don't play well together.

Motivation

I'm looking for minimal/clean way to make combobox work in controlled mode in React forms (RHF, or tanstack form)

[atomiks]

<Combobox.Clear> sets the value to null (single select) or an empty array (multiple select), not undefined. The hidden input also serializes the value prop to type string.

Do you have a Stackblitz repro of what you're describing?

[psiho]

I'm sorry, you're right, it sets it to null, not undefined. I should've checked the source code before posting this. The route cause of my problem was Tanstack Form's field.handleChange(val) which accepts only string so I did another conversion there and forgot about it. And ignoring TS error there seems to cause filed.handleChange() to set value to undefined which caused my issue.

However, I still don't see a reason why empty string should not hide ComboboxClear too? But now it is only a minor thing and not really important.