From 1a46123dbfb5627ca09a2f5f868f863dfb6cf8f1 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Wed, 4 Aug 2021 18:04:31 +0300
Subject: [PATCH] TimeRangePicker: fix DOM nesting (#37550)

---
 .../components/DateTimePickers/TimeRangeInput.tsx  |  1 +
 .../TimeRangePicker/TimePickerContent.tsx          |  8 ++++----
 .../TimeRangePicker/TimeRangeForm.tsx              |  4 ++--
 .../TimeRangePicker/TimeRangeList.tsx              | 14 ++++++--------
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
index e8bf4feac32..f9a84698b66 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
@@ -141,6 +141,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => {
       inputStyles.suffix,
       css`
         position: relative;
+        top: -1px;
         margin-left: ${theme.v1.spacing.xs};
       `
     ),
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
index 7f41ea675a9..a0ef3870f45 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
@@ -232,7 +232,7 @@ const NarrowScreenForm: React.FC<FormProps> = (props) => {
 
   return (
     <fieldset>
-      <h3 className={styles.header}>
+      <div className={styles.header}>
         <button
           className={styles.expandButton}
           onClick={() => {
@@ -247,7 +247,7 @@ const NarrowScreenForm: React.FC<FormProps> = (props) => {
           <TimePickerTitle>Absolute time range</TimePickerTitle>
           {!hideQuickRanges && <Icon name={!collapsed ? 'angle-up' : 'angle-down'} />}
         </button>
-      </h3>
+      </div>
       {!collapsed && (
         <div className={styles.body} id="expanded-timerange">
           <div className={styles.form}>
@@ -278,9 +278,9 @@ const FullScreenForm: React.FC<FormProps> = (props) => {
   return (
     <>
       <div className={styles.container}>
-        <h3 className={styles.title} data-testid={selectors.components.TimePicker.absoluteTimeRangeTitle}>
+        <div className={styles.title} data-testid={selectors.components.TimePicker.absoluteTimeRangeTitle}>
           <TimePickerTitle>Absolute time range</TimePickerTitle>
-        </h3>
+        </div>
         <TimeRangeForm
           value={props.value}
           timeZone={props.timeZone}
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
index ba7c338836c..df2346b0236 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
@@ -96,7 +96,7 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
   const icon = isFullscreen ? null : <Button icon="calendar-alt" variant="secondary" onClick={onOpen} />;
 
   return (
-    <form aria-label="Absolute time ranges">
+    <div aria-label="Absolute time ranges">
       <Field label="From" invalid={from.invalid} error={from.errorMessage}>
         <Input
           onClick={(event) => event.stopPropagation()}
@@ -132,7 +132,7 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
         timeZone={timeZone}
         isReversed={isReversed}
       />
-    </form>
+    </div>
   );
 };
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
index bfffb65350b..edbb7b7274a 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
@@ -47,14 +47,12 @@ export const TimeRangeList: React.FC<Props> = (props) => {
 
   return (
     <section aria-label={title}>
-      <form>
-        <fieldset>
-          <div className={styles.title}>
-            <TimePickerTitle>{title}</TimePickerTitle>
-          </div>
-          <Options {...props} />
-        </fieldset>
-      </form>
+      <fieldset>
+        <div className={styles.title}>
+          <TimePickerTitle>{title}</TimePickerTitle>
+        </div>
+        <Options {...props} />
+      </fieldset>
     </section>
   );
 };