Fix crashing React loop if toggling the calendar popover from an inva…

…lid selected date

packages/eui/src/components/date_picker/date_picker.test.tsx

@@ -7,9 +7,10 @@
  */
 
 import React from 'react';
-import { render } from '../../test/rtl';
-import { requiredProps } from '../../test';
 import moment from 'moment';
+import { fireEvent } from '@testing-library/react';
+import { render, waitForEuiPopoverOpen } from '../../test/rtl';
+import { requiredProps } from '../../test';
 
 import { EuiDatePicker } from './date_picker';
 import { EuiContext } from '../context';
@@ -21,14 +22,22 @@ describe('EuiDatePicker', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('handles invalid `selected` dates', () => {
+  it('handles invalid `selected` dates', async () => {
     const { container } = render(
       <EuiDatePicker selected={moment('invalid')} />
     );
     const datepickerInput = container.querySelector('input.euiDatePicker');
 
     expect(datepickerInput).toHaveValue('Invalid date');
     expect(datepickerInput).toBeInvalid();
+
+    // The calendar date picker should load in a popover, but no date should be selected
+    fireEvent.focus(datepickerInput!);
+    await waitForEuiPopoverOpen();
+    const calendar = document.querySelector('.react-datepicker__month');
+    expect(calendar).toBeInTheDocument();
+    const selected = document.querySelector('.react-datepicker__day--selected');
+    expect(selected).not.toBeInTheDocument();
   });
 
   test('compressed', () => {

packages/eui/src/components/date_picker/react-datepicker/src/index.js

@@ -291,7 +291,7 @@ export default class DatePicker extends React.Component {
     return {
       open: this.props.startOpen || false,
       preventFocus: false,
-      preSelection: this.props.selected
+      preSelection: this.props.selected?._isValid
         ? newDate(this.props.selected)
         : boundedPreSelection,
       // transforming highlighted days (perhaps nested array)
@@ -696,7 +696,7 @@ export default class DatePicker extends React.Component {
         useWeekdaysShort={this.props.useWeekdaysShort}
         formatWeekDay={this.props.formatWeekDay}
         dropdownMode={this.props.dropdownMode}
-        selected={this.props.selected}
+        selected={this.props.selected?._isValid ? this.props.selected : undefined}
         preSelection={this.state.preSelection}
         onSelect={this.handleSelect}
         onWeekSelect={this.props.onWeekSelect}