Blinking and focus reset with react-table and withPortal for DateRangePicker

react-dates version react-dates@21.7.0

Describe the bug Using react-table and withPortal causes blinking and a focus reset when setting the startDate for DateRangePicker.

Source code (including props configuration) I am having trouble using react-dates as a filter inside react-table and I don’t think all the issues are due to react-table. In my local code, I can’t even open the calendar without using withPortal but I am unable to reproduce that problem in a codesandbox. If anybody has an idea there, let me know.

In this code sandbox (inside react-table, with withPortal), you can see that trying to set the startDate does not advance the focus to endDate. If you log the changes, you can see that it does switch to endDate but immediately resets back to startDate.

In this code sandbox, I have gotten ride of the react-table and everything works just fine.

I thought, OK, it must only be down to react-table but if you remove withPortal from the first sandbox, the focus change works correctly.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 79.0.3945.130

Additional context I’m sorry if this is purely because of react-table but since I can eliminate the issue even with react-table (although, only in the code sandbox and not in my own code) by removing withPortal, I still think there might be a bug somewhere with withPortal.

I don’t think this is related to #1523 or #1709, because of the focus problem, which is not seen in those bugs.

Also, does anybody know why the minDate is today, even though I have specified a minDate…

[mmarkelov]

@matttk seems like it comes from here: https://github.com/airbnb/react-dates/blob/c644b5c0b66a57dc2b1287b9bf188578e1475fac/src/components/DayPickerRangeController.jsx#L584-L664

Removing onBlur from this method fix this issue, but i need to check tests and make sure it will be OK

[mmarkelov]

@matttk as for your question about minDate you should enable passed days:

isOutsideRange={() => false}

But I can’t help you with react-table - it’s very interesting issue. I try to find out what’s wrong with it