Opening dropdown via dropdown icon hijacks events (react-datepicker example)

[rkulinski]

When using react-select with react-datepicker it seems that some architectural issue of react-select shows up.

Repro:
https://stackblitz.com/edit/react-o6gkep?file=src/App.js

Correct behaviour:

1. Open datepicker.
2. Click on select (not the part with icon on right) and observe datepicker is closed correctly.

Issue:

1. Open datepicker.
2. Click on the part with icon on right of select and observe datepicker is not closed.

I think there's a problem with how this div with icon is designed. Seems to me like it's highjacking events. That doesn't happen for other part of the select and IMO it shouldn't happen here as well.

It was reported here:
#1539
but closed without any resolution.

Versions:

    "react": "17.0.2",
    "react-datepicker": "4.6.0",
    "react-dom": "17.0.2",
    "react-select": "^5.2.2"

[rkulinski]

I think the issue is that dropdown indicator has it's own method for click (onDropdownIndicatorMouseDown). It calls stopPropagation which causes e.g. react-datepicker to not receive an event. I honestly don't understand why there are two handlers (with different logic inside) for something that seems should be working exactly the same.

[hushee69]

For information, the bug isn't reproductible in mobile view for some reason (used this https://stackblitz.com/edit/react-o6gkep?file=src/App.js while on mobile view and DatePicker does close correctly when select is clicked using the icon on right)

[rkulinski]

@hushee69 possibly because touch events are used.

[rkulinski]

Will be fixed in #5138