From 2cd1539a1292f644006c44c2684d71e3326190f8 Mon Sep 17 00:00:00 2001
From: troff8 <troffibp@gmail.com>
Date: Mon, 29 May 2023 14:49:59 +0400
Subject: [PATCH] fix: autofocus now works

---
 .../GoalDeleteModal/GoalDeleteModal.tsx         | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/GoalDeleteModal/GoalDeleteModal.tsx b/src/components/GoalDeleteModal/GoalDeleteModal.tsx
index 102d49db5..f323fa297 100644
--- a/src/components/GoalDeleteModal/GoalDeleteModal.tsx
+++ b/src/components/GoalDeleteModal/GoalDeleteModal.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useCallback, useState } from 'react';
+import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { danger0 } from '@taskany/colors';
 import {
@@ -28,6 +28,20 @@ interface GoalDeleteModalProps {
 
 export const GoalDeleteModal: React.FC<GoalDeleteModalProps> = ({ shortId, onConfirm, onCancel }) => {
     const [deleteConfirmation, setDeleteConfirmation] = useState('');
+    // FIXME: try to find better way to solve this issue with autoFocus
+    const ref = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        const globalListener = () => {
+            setTimeout(() => ref.current && ref.current.focus(), 0);
+        };
+
+        window.addEventListener(ModalEvent.GoalDeleteModal, globalListener);
+
+        return () => {
+            window.removeEventListener(ModalEvent.GoalDeleteModal, globalListener);
+        };
+    });
 
     const onConfirmationInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
         setDeleteConfirmation(e.currentTarget.value);
@@ -56,6 +70,7 @@ export const GoalDeleteModal: React.FC<GoalDeleteModalProps> = ({ shortId, onCon
 
                 <Form>
                     <FormInput
+                        ref={ref}
                         flat="bottom"
                         placeholder={shortId}
                         autoComplete="off"