From 4270e5606cb5906a1fe7f902b395b9799d13b2ae Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Tue, 20 Sep 2022 11:02:41 +0200
Subject: [PATCH] Alerting: Fix enter key 'clicking' first button on form
 (#55222)

* Add type='button' in button used in Heading component to prevent having the default value ='submit'

* Add type='button' for buttons used in form when grafana-managed alert type is selected

* Add type='button' for buttons used in form when mimir-or-loki alert type is selected
---
 packages/grafana-ui/src/components/Card/Card.tsx                | 2 +-
 public/app/features/query/components/QueryEditorRowHeader.tsx   | 1 +
 .../plugins/datasource/prometheus/components/PromQueryField.tsx | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 8b8df2ad1e0..2ca46f9d4bc 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -97,7 +97,7 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps &
           {children}
         </a>
       ) : onClick ? (
-        <button onClick={onClick} className={styles.linkHack} aria-label={ariaLabel}>
+        <button onClick={onClick} className={styles.linkHack} aria-label={ariaLabel} type="button">
           {children}
         </button>
       ) : (
diff --git a/public/app/features/query/components/QueryEditorRowHeader.tsx b/public/app/features/query/components/QueryEditorRowHeader.tsx
index 144401ccf0d..620a7781efd 100644
--- a/public/app/features/query/components/QueryEditorRowHeader.tsx
+++ b/public/app/features/query/components/QueryEditorRowHeader.tsx
@@ -91,6 +91,7 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
             title="Edit query name"
             onClick={onEditQuery}
             data-testid="query-name-div"
+            type="button"
           >
             <span className={styles.queryName}>{query.refId}</span>
             <Icon name="pen" className={styles.queryEditIcon} size="sm" />
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
index 79a53c3c3b6..f9edcc95f48 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
@@ -297,6 +297,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
                   className="gf-form-label query-keyword pointer"
                   onClick={this.onClickChooserButton}
                   disabled={buttonDisabled}
+                  type="button"
                 >
                   {chooserText}
                   <Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} />