I need to check if I click on a react-select element. I thought doing it by id and check the mouse event if hits the component that I want. It seems that it doesn't accept id as param and it doesn't have one. So I can't check it with event listener.
Is there a way to solve this problem? Adding an id to the react-select or doing it in another way. Keep in mind that I need to know whether I click on the area of the select or outside.
Here is my code:
<Select
defaultValue={defaultValue}
options={options}
styles={selectStyle()}
onFocus={onFocus}
onChange={onChange}
placeholder={placeholder}
value={value}
id="123" // This way doesn't work
/>
Try using onClick attribute.
const clickHandler = () => {
console.log("Select is clicked");
}
<Select
defaultValue={defaultValue}
options={options}
styles={selectStyle()}
onFocus={onFocus}
onChange={onChange}
onClick = {clickHandler}
placeholder={placeholder}
value={value}
id="123" // This way doesn't work
/>