From 635e489a590470bbc7388633d1994a462052ce75 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 20 Sep 2021 03:45:43 -0400
Subject: [PATCH] ConfirmModal: Fix confirm button focus on modal open (#39328)
 (#39397)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 06012a8da0571282adddd4dc61884e9c7b9a4a23)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../src/components/ConfirmModal/ConfirmModal.tsx       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index 638b21a4093..ee8071c6f00 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -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}