DateTime Picker is always rendered even when closed

[bjbrewster]

I'm Submitting a ...

[X] Bug report
[ ] Feature request
[ ] Support request

Steps to Reproduce

Open the CodePen example https://codepen.io/simeg/pen/mEmQmP and inspect the DateTime input element (right click -> Inspect in Chrome) to see the child rdtPicker element is always there despite being open or closed.

Expected Results

The rdPicker element should not be rendered at all in the DateTime render method when not 'open'.

Actual Results

The Picker component is currently hidden using CSS. This is not the React way of hiding elements. If you have a grid/list of elements each with a date input (or two or more if start and end date), even using a virtualised list, there can easily be 100+ DateTime Picker components needlessly rendered and listening to events all wrapped in onClickoutside wrappers!

Minimal Reproduction of the Problem

Other Information (e.g. stacktraces, related issues, suggestions how to fix)

If the reason for always rendering the Picker despite being 'closed' is to use CSS transitions to animate a fade in, or slide down/up etc, the component can easily be wrapped in a CSSTransitionGroup from react-transition-group to automatically add the enter/leave CSS classes or implement a very simple version to keep rendering the component for an optional transition time after removing the rdtOpen class from the DateTime wrapper <div>.

I'm working on a branch that cleans up a lot of the views as hopefully a start of v3. It would be a good time to change this behavior in v3 as it may break users custom CSS changes depending on the current behavior. I've updated this easily in my own branch, most of the work is in updating most of the tests that assume the Picker is open, and updating the Snapshots of course.

[arqex]

duplicated, see #648