Store selected time in state on dashboard header

ui/src/dashboards/components/DashboardHeader.tsx

@@ -15,6 +15,10 @@ import * as AppActions from 'src/types/actions/app'
 import * as DashboardsModels from 'src/types/dashboards'
 import * as QueriesModels from 'src/types/queries'
 
+interface State {
+  selected: QueriesModels.TimeRange
+}
+
 interface Props {
   activeDashboard: string
   dashboard: DashboardsModels.Dashboard
@@ -33,7 +37,7 @@ interface Props {
   isHidden: boolean
 }
 
-class DashboardHeader extends Component<Props> {
+class DashboardHeader extends Component<Props, State> {
   public static defaultProps: Partial<Props> = {
     zoomedTimeRange: {
       upper: null,
@@ -41,6 +45,29 @@ class DashboardHeader extends Component<Props> {
     },
   }
 
+  public static getDerivedStateFromProps(props: Props): Partial<State> {
+    const {upper, lower} = props.zoomedTimeRange
+
+    if (upper || lower) {
+      return {selected: {upper, lower}}
+    }
+
+    return {}
+  }
+
+  constructor(props: Props) {
+    super(props)
+
+    const {timeRange, zoomedTimeRange} = props
+
+    this.state = {
+      selected: {
+        upper: timeRange.upper || zoomedTimeRange.upper,
+        lower: timeRange.lower || zoomedTimeRange.lower,
+      },
+    }
+  }
+
   public render() {
     const {isHidden} = this.props
 
@@ -65,14 +92,9 @@ class DashboardHeader extends Component<Props> {
   }
 
   private get optionsComponents(): JSX.Element {
-    const {
+    const {handleChooseAutoRefresh, onManualRefresh, autoRefresh} = this.props
-      handleChooseAutoRefresh,
+
-      onManualRefresh,
+    const {selected} = this.state
-      autoRefresh,
-      handleChooseTimeRange,
-      timeRange: {upper, lower},
-      zoomedTimeRange: {upper: zoomedUpper, lower: zoomedLower},
-    } = this.props
 
     return (
       <>
@@ -86,11 +108,8 @@ class DashboardHeader extends Component<Props> {
           iconName="refresh"
         />
         <TimeRangeDropdown
-          onChooseTimeRange={handleChooseTimeRange}
+          onChooseTimeRange={this.handleChooseTimeRange}
-          selected={{
+          selected={selected}
-            upper: zoomedUpper || upper,
-            lower: zoomedLower || lower,
-          }}
         />
         <button
           className="btn btn-default btn-sm btn-square"
@@ -101,6 +120,17 @@ class DashboardHeader extends Component<Props> {
       </>
     )
   }
+
+  private handleChooseTimeRange = (
+    timeRange: QueriesModels.TimeRange
+  ): void => {
+    this.setState({selected: timeRange}, () => {
+      window.setTimeout(() => {
+        this.props.handleChooseTimeRange(timeRange)
+      }, 0)
+    })
+  }
+
   private handleClickPresentationButton = (): void => {
     this.props.handleClickPresentationButton()
   }

ui/src/shared/components/TimeRangeDropdown.js

@@ -50,8 +50,11 @@ class TimeRangeDropdown extends Component {
   }
 
   handleSelection = timeRange => () => {
-    this.props.onChooseTimeRange(timeRange)
+    this.setState({customTimeRange: emptyTime, isOpen: false}, () => {
-    this.setState({customTimeRange: emptyTime, isOpen: false})
+      window.setTimeout(() => {
+        this.props.onChooseTimeRange(timeRange)
+      }, 0)
+    })
   }
 
   toggleMenu = () => {