From ff1a931f6fd43efa0307a1c2d985cab8992fc966 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Wed, 26 Aug 2020 16:29:01 +0300
Subject: [PATCH] Grafana-UI: Form - inherit HTMLFormElement props (#27227)

---
 packages/grafana-ui/src/components/Forms/Form.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx
index 2425029358e..5f77ecf2ee0 100644
--- a/packages/grafana-ui/src/components/Forms/Form.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { HTMLProps, useEffect } from 'react';
 import { useForm, Mode, OnSubmit, DeepPartial } from 'react-hook-form';
 import { FormAPI } from '../../types';
 import { css } from 'emotion';
 
-interface FormProps<T> {
+interface FormProps<T> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
   validateOn?: Mode;
   validateOnMount?: boolean;
   validateFieldsOnMount?: string[];
@@ -22,6 +22,7 @@ export function Form<T>({
   children,
   validateOn = 'onSubmit',
   maxWidth = 400,
+  ...htmlProps
 }: FormProps<T>) {
   const { handleSubmit, register, errors, control, triggerValidation, getValues, formState, watch } = useForm<T>({
     mode: validateOn,
@@ -41,6 +42,7 @@ export function Form<T>({
         width: 100%;
       `}
       onSubmit={handleSubmit(onSubmit)}
+      {...htmlProps}
     >
       {children({ register, errors, control, getValues, formState, watch })}
     </form>