In Ant Design, they have provided a bunch of props
with very simple names to get our things done in a very friendly manner.
You can decide the initial openness/closeness of your Select element using defaultOpen
prop and, always one-to-one bound openness/closeness using open
prop.
Here you want to control the open/close action in always one-to-one bound manner I guess. So your code should be like this!
const [selectAria, setSelectAria] = useState(false);
<Select
name="someName"
id="someID"
onSelect={(value) => handleChangeSelect(value)}
open={selectArea}
>
*Note: Removed your aria-label
attribute as well. Refer official AntD documentation for a suitable prop API – Select Component!
**Note: If you use this open
prop I mentioned above, it may never allow you to close the panel until your selectAria
variable is true
. So you have to carefully handle that situation as well!
***Note: This answer is referred to Ant Design version 4.7.3. Select the correct version of documentation before you refer!
CLICK HERE to find out more related problems solutions.