react-datepicker interferes with react-select

[gilbertkaradja]

Noticed a weird behavior. I use react-datepicker and react-select. When the select is opened, if i click on the datepicker, the select field closes and the datepicker opens as expected.

But when the datepicker is open, if i try to click on the select, the select opens and the datepicker closes BUT almost instantly the select closes and datepicker opens again.

[tume]

I'm also seeing this....not sure which one to blame here but at least seems to be related to these lines:
https://github.com/Hacker0x01/react-datepicker/blob/master/src/datepicker.jsx#L156-L157

Without that deferFocusInput() works for me. Not really sure why that is needed or what it is actually achieving so can't really comment on how to fix it. If someone has some pointers of fixing this I could try submitting PR. Didn't yet check anything on react-select side so there might be also something.

[tume]

Added example repository for reproducing this:
https://github.com/tume/select-datepicker-conflict

Just react-datepicker example + empty react-select component. You can see the weird behaviour when opening calendar and then trying to open the select component.

I was digging this a bit deeper and my understanding now is that onBlur is being called before onClickOutside which means the calendar is still open when onBlur is called. And this seems to happen because react-select listens to mouseDown event and is calling focus in that handler and by my speculation is then calling onBlur in react-datepicker.

I'm not so familiar with all these events and their correct calling order so would appreciate if someone can point out that should this be fixed in this component or is this more to do with react-select ?

[gilbertkaradja]

@tume The lines u referenced here: https://github.com/Hacker0x01/react-datepicker/blob/master/src/datepicker.jsx#L156-L157 , removing them fixes the issue?

[tume]

@gilbertkaradja I was testing by calling this.props.onBlur(event) always so skipping that deferFocusInput().

[gilbertkaradja]

And that fixed the flickering?

[tume]

Yeah in my testing but it's not really a proper fix.

[gilbertkaradja]

Sure, but have you noticed any side-effects? I haven't had time to properly investigate this, might do that tomorrow

[rafeememon]

If I recall correctly, removing those lines would cause the input to not refocus after the calendar is clicked.

[gilbertkaradja]

@rafeememon: If that's all it does I am willing to sacrifice that feature to get rid of the flicker-bug

[rafeememon]

Unfortunately that'd be breaking behavior that I'm not sure others would be willing to sacrifice =)

[gilbertkaradja]

@rafeememon: I did't mean remove the functionality entirely. I will employ the "fix" until I or someone else finds a proper solution

[gilbertkaradja]

Any update on this?

[rafeememon]

@gilbertkaradja, nope, any help creating a proper fix would be great

[ibcWillJust42]

Same problem