Uses React's onClick handler instead of OutsideClickHandler with withPortal implementations

[majapw]

Fix for #340

This fixes an issue with Firefox specifically where the order of operations of the events caused the withPortal DayPicker to immediately close upon opening.

to: @lencioni
fyi: @phamcharles

[ljharb]

Do we want to do this unconditionally, or only when withPortal is false?

[majapw]

@ljharb If you look at where onOutsideClick the variable is defined, we do it conditionally:

const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onClearFocus : undefined;

which is what we want.

[coveralls]

Coverage decreased (-0.1%) to 80.059% when pulling a548fbc on maja-fix-firefox-outside-click-with-portal-woes into 5bdcdc4 on master.

[coveralls]

Coverage decreased (-0.1%) to 80.059% when pulling a548fbc on maja-fix-firefox-outside-click-with-portal-woes into 5bdcdc4 on master.

[ljharb]

Is this an issue with OutsideClickHandler itself; or with our event handler not checking the event target properly? In other words, is this something we could solve while keeping OutsideClickHandler (even if this is a good hotfix in the interim)?

[majapw]

@ljharb So I don't think it is specifically an issue with the OutsideClickHandler. It def does check event target properly, but the issue is with the way the native event system plays with the react event system/render cycle.

Basically, here is what happens on Chrome:

1. input takes focus event when you click on the input
2. focus event moves up the tree and triggers onFocusChange
3. onFocusChange updates state.focusedInput
4. click event happens somewhere between 2 and here
5. render cycle begins, rendering the withPortal calendar to the page

Conversely, here is what happens in Firefox

1. input takes focus event when you click on the input
2. focus event moves up the tree and triggers onFocusChange
3. onFocusChange updates state.focusedInput
4. render cycle begins, rendering the withPortal calendar to the page
5. click event gets triggered
6. because the click is now outside the root node (the visible calendar area) of the now renderedOutsideClickHandler, onOutsideClick gets triggered
7. the calendar closes

Because the initial event is a (1) a focus event and (2) a react event, and the outside click event is (1) a click event and (2) a native JS event, I think there is some conflict between making them play nice together in this one weird edge case. I discussed this with @lencioni and I think this is the solution and not just a hotfix.

[majapw]

Do you want to :stamp: me @ljharb? :D

[ljharb]

I kind of get your explanation, and I'm really nervous about adding an onClick to a div instead of using our nice abstracted component; but your changes look fine.