diff --git a/CHANGELOG.md b/CHANGELOG.md index 2807ad1509c..149aa9ad48a 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js index aee6f091da4..54ea8557951 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.js +++ b/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,