[Select] How do I clear the selected value from Select

[TinsFox]

How to use an icon to clear the value to the right of the value after Select selects it

Just like the antd example below

https://codesandbox.io/p/sandbox/ji-ben-shi-yong-antd-5-12-8-forked-dfh5sh?file=%2Fdemo.tsx%3A21%2C17

Not sure if this is a new feature.

[jjenzz]

all of the radix components provide a controlled API which means they'll have a value/open prop of some sort and an equivalent onValueChange/onOpenChange prop. the controlled API is meant for cases like these however, there appears to maybe be a bug where setting the value to an empty string does not reset the UI back to the placeholder: https://codesandbox.io/p/devbox/dreamy-brook-x3vx7f?file=%2FApp.jsx%3A23%2C25&workspaceId=b4d1c98c-2e7d-446f-80be-3ed4887b82ac

@benoitgrelard would you expect this behaviour to be possible?

[jjenzz]

apologies, i forgot to make it public 🙈 try the link again, it should work now

[TinsFox]

It can be seen now. That's what I'm doing now. Is there a better way?

[swingthrough]

Even though that the package.json in the codesandbox shows "@radix-ui/react-select": "latest", in yarn.lock you can see that the installed version is 1.2.2.
The bug has already been fixed in #2174.

Latest version is 2.0.0 so the only bug I guess is that somehow codesandbox did not resolve "latest" properly?

In npm @radix-ui/react-select has tag latest for 2.0.0 so that should be ok.

[swingthrough]

However, I wonder how it would be done so that the ChevronDown is not replaced by the CrossCircledIcon. Something like react-select with the clearable option - basically when there is value, show the clear button, but don't hide the dropdown indicator.

[swingthrough]

I think I got it to work:
https://codesandbox.io/p/devbox/trusting-darkness-h6p7vd
I was trying to render a button next to the Select.Icon with ChevronDown before. Didn't realize that I can actually use Select.Icon twice, one for the button and one for the chevron, and it will show up... Is it okay to do it like this or can there be some issues with it?