Clicking the "ClearIndicator" triggers outsideClick hook

[LucasNovaes2016]

Hi! I ran into a possible issue with react-select (currently using the latest version 5.7.3, but it also happens in previous versions).

I have a situation in which I need to do something when the user clicks outside a div (and the react-select component is inside that div). Therefore, clicking inside the react-select component should not trigger the "outside click". And that's working fine, EXCEPT when I click the clearIndicator (the x button at the end of the input). I don't understand why this is happening and it's causing the logic I programmed for the click-outside event to be called in a situation where it shouldn't.

Some things to keep in mind:

1. I've tested several implementations of "clickOutside" hooks, including third-party libraries, and all of them are detecting a click outside when I click on the "x" button.
2. I'm using a "pure" version of react-select without any style or behavior modifications on my part.

I made this illustrative screenshot below: any click inside the green div should be considered a click inside, including clicking anywhere in the react-select. Only clicks outside the green div should be considered "clicks outside". But currently, clicking specifically on the clearIndicator is considered a click outside the green div. The problem doesn't happen when I click on any other part of react-select

Could anyone try doing something similar and see if the same issue occurs?

[tommywalkie]

@LucasNovaes2016 Late response, but I have a clue about it:
By design, as of today, react-select's default clear indicator component only shows up if there is a selected value.
Most outside click hooks like this one will check if the said clicked element is within your container ref but since it is removed on click, it is considered as an outside click.

Using a custom clear indicator component that is not wrapped inside default ClearIndicator component, inside components.ClearIndicator prop, alleviates the issue for such use-case.