Why Select component can be empty when isRequired property exist?

[jkiss]

I set isRequired prop on Select component, BUT when I click the same item, Select will be empty, I think this behavior is weird, right?

[alphaxek]

Hi @jkiss, can you please share your code snippet, are you passing the data to it?

[jkiss]

reproduce link: https://codesandbox.io/p/devbox/jolly-rhodes-2742hf?file=%2Fapp%2Fpage.tsx%3A24%2C57

[wingkwong]

If possible, please share a video demo. When you click the same item again, it will unselect so the select will be empty.

[jkiss]

reproduce link: https://codesandbox.io/p/devbox/jolly-rhodes-2742hf?file=%2Fapp%2Fpage.tsx%3A24%2C57

[wingkwong]

@jkiss The behaviour is correct.

When you add isRequired to Select, it will have a danger asterisk at the end of the label and the select will be required. Since you don't have placeholder, you won't be able to see that danger asterisk. Here's an example how it looks like.

When you click the item in the first time, you select this item. When you click the same item again, it will unselect so the select will be empty. If you wrap it by <form>, when you submit an empty selection, you should be able to see please fill in this field.

[jkiss]

ok...by the way, how can I disable the behavior that unselect item when click itself again? I just want there must be at least one value 😄

[wingkwong]

You can simply add a condition before calling setInputLang

[jkiss]

a little bit not easy to use, I also think click same item make it empty is NOT a normal behavior🤔, thanks for your response

[U29]

You can set the disallowEmptySelection={true} prop if you want to.