TimeRangeForm: Do not use HTML form (#54318)

* TimeRangeForm: Do not use HTML form

* TimeRangeForm: rename to TimeRangeContent

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -12,7 +12,7 @@ import { Icon } from '../../Icon/Icon';
 
 import { TimePickerFooter } from './TimePickerFooter';
 import { TimePickerTitle } from './TimePickerTitle';
-import { TimeRangeForm } from './TimeRangeForm';
+import { TimeRangeContent } from './TimeRangeContent';
 import { TimeRangeList } from './TimeRangeList';
 import { mapOptionToTimeRange, mapRangeToTimeOption } from './mapper';
 
@@ -155,7 +155,7 @@ const NarrowScreenForm = (props: FormProps) => {
       {!collapsed && (
         <div className={styles.body} id="expanded-timerange">
           <div className={styles.form}>
-            <TimeRangeForm value={value} onApply={onChange} timeZone={timeZone} isFullscreen={false} />
+            <TimeRangeContent value={value} onApply={onChange} timeZone={timeZone} isFullscreen={false} />
           </div>
           {showHistory && (
             <TimeRangeList
@@ -185,7 +185,7 @@ const FullScreenForm: React.FC<FormProps> = (props) => {
         <div className={styles.title} data-testid={selectors.components.TimePicker.absoluteTimeRangeTitle}>
           <TimePickerTitle>Absolute time range</TimePickerTitle>
         </div>
-        <TimeRangeForm
+        <TimeRangeContent
           value={value}
           timeZone={timeZone}
           fiscalYearStartMonth={fiscalYearStartMonth}

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { dateTimeParse, TimeRange } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { TimeRangeForm } from './TimeRangeForm';
+import { TimeRangeContent } from './TimeRangeContent';
 
 type TimeRangeFormRenderResult = RenderResult & {
   getCalendarDayByLabelText(label: string): HTMLButtonElement;
@@ -20,7 +20,9 @@ const defaultTimeRange: TimeRange = {
 };
 
 function setup(initial: TimeRange = defaultTimeRange, timeZone = 'utc'): TimeRangeFormRenderResult {
-  const result = render(<TimeRangeForm isFullscreen={true} value={initial} onApply={() => {}} timeZone={timeZone} />);
+  const result = render(
+    <TimeRangeContent isFullscreen={true} value={initial} onApply={() => {}} timeZone={timeZone} />
+  );
 
   return {
     ...result,

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx

@@ -44,7 +44,7 @@ const ERROR_MESSAGES = {
   range: '"From" can\'t be after "To"',
 };
 
-export const TimeRangeForm = (props: Props) => {
+export const TimeRangeContent = (props: Props) => {
   const { value, isFullscreen = false, timeZone, onApply: onApplyFromProps, isReversed, fiscalYearStartMonth } = props;
   const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);
   const style = useStyles2(getStyles);
@@ -68,20 +68,16 @@ export const TimeRangeForm = (props: Props) => {
     [setOpen]
   );
 
-  const onApply = useCallback(
-    (e: FormEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      if (to.invalid || from.invalid) {
-        return;
-      }
+  const onApply = useCallback(() => {
+    if (to.invalid || from.invalid) {
+      return;
+    }
 
-      const raw: RawTimeRange = { from: from.value, to: to.value };
-      const timeRange = rangeUtil.convertRawToRange(raw, timeZone, fiscalYearStartMonth);
+    const raw: RawTimeRange = { from: from.value, to: to.value };
+    const timeRange = rangeUtil.convertRawToRange(raw, timeZone, fiscalYearStartMonth);
 
-      onApplyFromProps(timeRange);
-    },
-    [from.invalid, from.value, onApplyFromProps, timeZone, to.invalid, to.value, fiscalYearStartMonth]
-  );
+    onApplyFromProps(timeRange);
+  }, [from.invalid, from.value, onApplyFromProps, timeZone, to.invalid, to.value, fiscalYearStartMonth]);
 
   const onChange = useCallback(
     (from: DateTime | string, to: DateTime | string) => {
@@ -92,6 +88,12 @@ export const TimeRangeForm = (props: Props) => {
     [timeZone]
   );
 
+  const submitOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      onApply();
+    }
+  };
+
   const fiscalYear = rangeUtil.convertRawToRange({ from: 'now/fy', to: 'now/fy' }, timeZone, fiscalYearStartMonth);
 
   const fyTooltip = (
@@ -115,13 +117,14 @@ export const TimeRangeForm = (props: Props) => {
   );
 
   return (
-    <form>
+    <div>
       <div className={style.fieldContainer}>
         <Field label="From" invalid={from.invalid} error={from.errorMessage}>
           <Input
             onClick={(event) => event.stopPropagation()}
             onChange={(event) => onChange(event.currentTarget.value, to.value)}
             addonAfter={icon}
+            onKeyDown={submitOnEnter}
             aria-label={selectors.components.TimePicker.fromField}
             value={from.value}
           />
@@ -134,13 +137,14 @@ export const TimeRangeForm = (props: Props) => {
             onClick={(event) => event.stopPropagation()}
             onChange={(event) => onChange(from.value, event.currentTarget.value)}
             addonAfter={icon}
+            onKeyDown={submitOnEnter}
             aria-label={selectors.components.TimePicker.toField}
             value={to.value}
           />
         </Field>
         {fyTooltip}
       </div>
-      <Button data-testid={selectors.components.TimePicker.applyTimeRange} type="submit" onClick={onApply}>
+      <Button data-testid={selectors.components.TimePicker.applyTimeRange} type="button" onClick={onApply}>
         Apply time range
       </Button>
 
@@ -155,7 +159,7 @@ export const TimeRangeForm = (props: Props) => {
         timeZone={timeZone}
         isReversed={isReversed}
       />
-    </form>
+    </div>
   );
 };