From 764ec0bd98a7ade0a1d468caea82656eb9ee389c Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 7 Oct 2021 02:22:46 -0400
Subject: [PATCH] TimePicker: fix console error on time picker open (#40067)
 (#40072)

* TimePicker: fix console error on time picker open

(cherry picked from commit ba31e4ee4d8003a5b555d64e786440d4afe71f59)

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>
---
 .../TimeRangePicker/TimeRangeForm.tsx         | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
index 50d82547cbf..2a42b1c7e50 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
@@ -115,8 +115,8 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
 
   return (
     <div aria-label="Absolute time ranges">
-      <Field label="From" invalid={from.invalid} error={from.errorMessage}>
-        <div className={style.fieldContainer}>
+      <div className={style.fieldContainer}>
+        <Field label="From" invalid={from.invalid} error={from.errorMessage}>
           <Input
             onClick={(event) => event.stopPropagation()}
             onFocus={onFocus}
@@ -125,11 +125,11 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
             aria-label={selectors.components.TimePicker.fromField}
             value={from.value}
           />
-          {fyTooltip}
-        </div>
-      </Field>
-      <Field label="To" invalid={to.invalid} error={to.errorMessage}>
-        <div className={style.fieldContainer}>
+        </Field>
+        {fyTooltip}
+      </div>
+      <div className={style.fieldContainer}>
+        <Field label="To" invalid={to.invalid} error={to.errorMessage}>
           <Input
             onClick={(event) => event.stopPropagation()}
             onFocus={onFocus}
@@ -138,9 +138,9 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
             aria-label={selectors.components.TimePicker.toField}
             value={to.value}
           />
-          {fyTooltip}
-        </div>
-      </Field>
+        </Field>
+        {fyTooltip}
+      </div>
       <Button data-testid={selectors.components.TimePicker.applyTimeRange} onClick={onApply}>
         Apply time range
       </Button>
@@ -217,7 +217,7 @@ function getStyles(theme: GrafanaTheme2) {
     `,
     tooltip: css`
       padding-left: ${theme.spacing(1)};
-      padding-top: ${theme.spacing(0.5)};
+      padding-top: ${theme.spacing(3)};
     `,
   };
 }