EuiSuperDatePicker determine state.isInvalid on props update (#1483)

* EuiSuperDatePicker determine state.isInvalid on props update

* calculate isInvalid in constructor

* change log

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 - `EuiHeader` no longer reduces height at mobile sizes ([#1480](https://github.com/elastic/eui/pull/1480))
 
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` not updating derived `isInvalid` state on prop update ([#1483](https://github.com/elastic/eui/pull/1483))
+
 ## [`6.7.2`](https://github.com/elastic/eui/tree/v6.7.2)
 
 - Default light theme now comes with an empty light variables file to make theme switching easier ([#1479](https://github.com/elastic/eui/pull/1479))

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -16,6 +16,20 @@ import { EuiDatePickerRange } from '../date_picker_range';
 import { EuiFormControlLayout } from '../../form';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 
+function isRangeInvalid(start, end) {
+  if (start === 'now' && end === 'now') {
+    return true;
+  }
+
+  const startMoment = dateMath.parse(start);
+  const endMoment = dateMath.parse(end, { roundUp: true });
+  if (startMoment.isAfter(endMoment)) {
+    return true;
+  }
+
+  return false;
+}
+
 export class EuiSuperDatePicker extends Component {
 
   static propTypes = {
@@ -97,7 +111,7 @@ export class EuiSuperDatePicker extends Component {
         },
         start: nextProps.start,
         end: nextProps.end,
-        isInvalid: false,
+        isInvalid: isRangeInvalid(nextProps.start, nextProps.end),
         hasChanged: false,
         showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges),
       };
@@ -122,22 +136,14 @@ export class EuiSuperDatePicker extends Component {
       },
       start,
       end,
-      isInvalid: false,
+      isInvalid: isRangeInvalid(start, end),
       hasChanged: false,
       showPrettyDuration: showPrettyDuration(start, end, commonlyUsedRanges),
     };
   }
 
   setTime = ({ start, end }) => {
-    const startMoment = dateMath.parse(start);
-    const endMoment = dateMath.parse(end, { roundUp: true });
-    const isInvalid = (start === 'now' && end === 'now') || startMoment.isAfter(endMoment);
-
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
-      this.hideTooltip();
-      this.tooltipTimeout = null;
-    }
+    const isInvalid = isRangeInvalid(start, end);
 
     this.setState({
       start,