IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ConfirmModal: Fix confirm button focus on modal open (#39328)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-09-20 09:03:57 +02:00 committed by GitHub
parent 85391c59d0
commit 06012a8da0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { css } from '@emotion/css';
import { Modal } from '../Modal/Modal';
import { IconName } from '../../types/icon';
@ -51,10 +51,16 @@ export const ConfirmModal = ({
}: ConfirmModalProps): JSX.Element => {
const [disabled, setDisabled] = useState(Boolean(confirmationText));
const styles = useStyles2(getStyles);
const buttonRef = useRef<HTMLButtonElement>(null);
const onConfirmationTextChange = (event: React.FormEvent<HTMLInputElement>) => {
setDisabled(confirmationText?.localeCompare(event.currentTarget.value) !== 0);
};
useEffect(() => {
// for some reason autoFocus property did no work on this button, but this does
buttonRef.current?.focus();
}, []);
return (
<Modal className={styles.modal} title={title} icon={icon} isOpen={isOpen} onDismiss={onDismiss}>
<div className={styles.modalText}>
@ -76,7 +82,7 @@ export const ConfirmModal = ({
variant="destructive"
onClick={onConfirm}
disabled={disabled}
autoFocus
ref={buttonRef}
aria-label={selectors.pages.ConfirmModal.delete}
>
{confirmText}