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
This commit is contained in:
Sonia Aguilar 2022-09-20 11:02:41 +02:00 committed by GitHub
parent 20e6e0d593
commit 4270e5606c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 1 deletions

View File

@ -97,7 +97,7 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps &
{children} {children}
</a> </a>
) : onClick ? ( ) : onClick ? (
<button onClick={onClick} className={styles.linkHack} aria-label={ariaLabel}> <button onClick={onClick} className={styles.linkHack} aria-label={ariaLabel} type="button">
{children} {children}
</button> </button>
) : ( ) : (

View File

@ -91,6 +91,7 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
title="Edit query name" title="Edit query name"
onClick={onEditQuery} onClick={onEditQuery}
data-testid="query-name-div" data-testid="query-name-div"
type="button"
> >
<span className={styles.queryName}>{query.refId}</span> <span className={styles.queryName}>{query.refId}</span>
<Icon name="pen" className={styles.queryEditIcon} size="sm" /> <Icon name="pen" className={styles.queryEditIcon} size="sm" />

View File

@ -297,6 +297,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
className="gf-form-label query-keyword pointer" className="gf-form-label query-keyword pointer"
onClick={this.onClickChooserButton} onClick={this.onClickChooserButton}
disabled={buttonDisabled} disabled={buttonDisabled}
type="button"
> >
{chooserText} {chooserText}
<Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} /> <Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} />