onClick on children of is OutsideClickHandler prevented

[LukaszGrela]

I have wrapped some components with OutsideClickHandler the onOutsideClick works but I've noticed that none of my onClick handlers are working. It should not stop interaction on children of OutsideClickHandler.

[ljharb]

Can you share some code?

[Karthick-FK]

@ljharb if i click any options inside a dropdown (react-select in my case) - My options wil have input type checkbox with respective label . . At that time, those options are not clickable. .

i tried with event.stopPropagation & immediatePropagation() inside the outsideClick event handler. That is not working

[ljharb]

@Karthick-FK can you make a codesandbox that repros the issue?

[Karthick-FK]

@ljharb I have found out the reason for the issue.

i have configured a custom option (check box wit label) for my react-selct. If i remove this option:option from my components attribute , it is working fine. .

<Select onChange={onChangeHandler}> --> on change event not triggered when using custom option in my case.

components={{
IndicatorSeparator: () => null,
MultiValueRemove: () => null,
MultiValueContainer: multiValueContainer,
Option: option,
DropdownIndicator: dropdownIndicator
}}

const option = (props: any) => {
return (
<components.Option {...props}>
<input
style={{ marginRight: "6px" }}
type="checkbox"
checked={props.isSelected}
onChange={() => {}}
/>
{props.data.label}
</components.Option>
)
}

I will try to fix or set up a code sandbox and update here

[Karthick-FK]

@ljharb On my further analysis , am not able to replicate this in code sandbox.

https://codesandbox.io/s/proud-moon-ekcze?file=/src/index.js

Also, i used the same select in my other screen. I introduced outside click handler in that screen and checked. But i can able to select the custom option in that screen.

I assume there will be some css issue (grid, flex) or z-index issue. But still no luck. Will update if i find anything.