EuiSuperDatePicker move EuiDatePopoverButton isOpen state into EuiSuperDatePicker

CHANGELOG.md

@@ -7,6 +7,7 @@
 **Bug fixes**
 
 - Fixed popover & tooltip positioning to properly account for arrow buffer ([#1490](https://github.com/elastic/eui/pull/1490))
+- Fixed `EuiSuperDatePicker` unexpectedly closing start and end date popovers ([#1494](https://github.com/elastic/eui/pull/1494))
 
 ## [`6.7.3`](https://github.com/elastic/eui/tree/v6.7.3)
 

src/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -1,100 +1,88 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
 import { EuiPopover } from '../../../popover';
 
 import { formatTimeString } from '../pretty_duration';
 import { EuiDatePopoverContent } from './date_popover_content';
 
-export class EuiDatePopoverButton extends Component {
-  static propTypes = {
-    position: PropTypes.oneOf(['start', 'end']),
-    isInvalid: PropTypes.bool,
-    needsUpdating: PropTypes.bool,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    dateFormat: PropTypes.string.isRequired,
-    roundUp: PropTypes.bool,
-  }
-
-  state = {
-    isOpen: false,
-  }
+export function EuiDatePopoverButton(props) {
+  const {
+    position,
+    isInvalid,
+    needsUpdating,
+    value,
+    buttonProps,
+    roundUp,
+    onChange,
+    dateFormat,
+    isOpen,
+    onPopoverToggle,
+    onPopoverClose,
+    ...rest
+  } = props;
 
-  togglePopover = () => {
-    this.setState((prevState) => {
-      return { isOpen: !prevState.isOpen };
-    });
-  }
+  const classes = classNames([
+    'euiDatePopoverButton',
+    `euiDatePopoverButton--${position}`,
+    {
+      'euiDatePopoverButton-isSelected': isOpen,
+      'euiDatePopoverButton-isInvalid': isInvalid,
+      'euiDatePopoverButton-needsUpdating': needsUpdating
+    }
+  ]);
 
-  closePopover = () => {
-    this.setState({
-      isOpen: false,
-    });
+  let title = value;
+  if (isInvalid) {
+    title = `Invalid date: ${title}`;
+  } else if (needsUpdating) {
+    title = `Update needed: ${title}`;
   }
 
-  render() {
-    const {
-      position,
-      isInvalid,
-      needsUpdating,
-      value,
-      buttonProps,
-      roundUp,
-      onChange,
-      dateFormat,
-      ...rest
-    } = this.props;
-
-    const classes = classNames([
-      'euiDatePopoverButton',
-      `euiDatePopoverButton--${position}`,
-      {
-        'euiDatePopoverButton-isSelected': this.state.isOpen,
-        'euiDatePopoverButton-isInvalid': isInvalid,
-        'euiDatePopoverButton-needsUpdating': needsUpdating
-      }
-    ]);
+  const button = (
+    <button
+      onClick={onPopoverToggle}
+      className={classes}
+      title={title}
+      data-test-subj={`superDatePicker${position}DatePopoverButton`}
+      {...buttonProps}
+    >
+      {formatTimeString(value, dateFormat, roundUp)}
+    </button>
+  );
 
-    let title = value;
-    if (isInvalid) {
-      title = `Invalid date: ${title}`;
-    } else if (needsUpdating) {
-      title = `Update needed: ${title}`;
-    }
-
-    const button = (
-      <button
-        onClick={this.togglePopover}
-        className={classes}
-        title={title}
-        data-test-subj={`superDatePicker${this.props.position}DatePopoverButton`}
-        {...buttonProps}
-      >
-        {formatTimeString(value, dateFormat, roundUp)}
-      </button>
-    );
-
-    return (
-      <EuiPopover
-        className="euiDatePopoverButton__popover"
-        button={button}
-        isOpen={this.state.isOpen}
-        closePopover={this.closePopover}
-        anchorPosition={this.props.position === 'start' ? 'downLeft' : 'downRight'}
-        anchorClassName="euiDatePopoverButton__popoverAnchor"
-        panelPaddingSize="none"
-        ownFocus
-        {...rest}
-      >
-        <EuiDatePopoverContent
-          value={value}
-          roundUp={roundUp}
-          onChange={onChange}
-          dateFormat={dateFormat}
-        />
-      </EuiPopover>
-    );
-  }
+  return (
+    <EuiPopover
+      className="euiDatePopoverButton__popover"
+      button={button}
+      isOpen={isOpen}
+      closePopover={onPopoverClose}
+      anchorPosition={position === 'start' ? 'downLeft' : 'downRight'}
+      anchorClassName="euiDatePopoverButton__popoverAnchor"
+      panelPaddingSize="none"
+      ownFocus
+      {...rest}
+    >
+      <EuiDatePopoverContent
+        value={value}
+        roundUp={roundUp}
+        onChange={onChange}
+        dateFormat={dateFormat}
+      />
+    </EuiPopover>
+  );
 }
+
+EuiDatePopoverButton.propTypes = {
+  position: PropTypes.oneOf(['start', 'end']),
+  isInvalid: PropTypes.bool,
+  needsUpdating: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  dateFormat: PropTypes.string.isRequired,
+  roundUp: PropTypes.bool,
+  isOpen: PropTypes.bool.isRequired,
+  onPopoverToggle: PropTypes.func.isRequired,
+  onPopoverClose: PropTypes.func.isRequired,
+};

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -139,6 +139,8 @@ export class EuiSuperDatePicker extends Component {
       isInvalid: isRangeInvalid(start, end),
       hasChanged: false,
       showPrettyDuration: showPrettyDuration(start, end, commonlyUsedRanges),
+      isStartDatePopoverOpen: false,
+      isEndDatePopoverOpen: false,
     };
   }
 
@@ -195,6 +197,26 @@ export class EuiSuperDatePicker extends Component {
     this.setState({ showPrettyDuration: false });
   }
 
+  onStartDatePopoverToggle = () => {
+    this.setState(prevState => {
+      return { isStartDatePopoverOpen: !prevState.isStartDatePopoverOpen };
+    });
+  }
+
+  onStartDatePopoverClose = () => {
+    this.setState({ isStartDatePopoverOpen: false });
+  }
+
+  onEndDatePopoverToggle = () => {
+    this.setState(prevState => {
+      return { isEndDatePopoverOpen: !prevState.isEndDatePopoverOpen };
+    });
+  }
+
+  onEndDatePopoverClose = () => {
+    this.setState({ isEndDatePopoverOpen: false });
+  }
+
   renderDatePickerRange = () => {
     const {
       start,
@@ -220,7 +242,9 @@ export class EuiSuperDatePicker extends Component {
       );
     }
 
-    if (this.state.showPrettyDuration) {
+    if (this.state.showPrettyDuration
+      && !this.state.isStartDatePopoverOpen
+      && !this.state.isEndDatePopoverOpen) {
       return (
         <EuiDatePickerRange
           className="euiDatePickerRange--inGroup"
@@ -254,6 +278,9 @@ export class EuiSuperDatePicker extends Component {
             onChange={this.setStart}
             value={start}
             dateFormat={this.props.dateFormat}
+            isOpen={this.state.isStartDatePopoverOpen}
+            onPopoverToggle={this.onStartDatePopoverToggle}
+            onPopoverClose={this.onStartDatePopoverClose}
           />
         }
         endDateControl={
@@ -265,6 +292,9 @@ export class EuiSuperDatePicker extends Component {
             value={end}
             dateFormat={this.props.dateFormat}
             roundUp
+            isOpen={this.state.isEndDatePopoverOpen}
+            onPopoverToggle={this.onEndDatePopoverToggle}
+            onPopoverClose={this.onEndDatePopoverClose}
           />
         }
       />