From 00b5728b4ac599b79f449bd8707f3013c0e3cec8 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:54:34 +0200
Subject: [PATCH] feat(web): manage initial focus for force run modal and
 filter add form (#1713)

* feat(web): manage initial focus for force run modal

* refactor(web): manage initial focus for force run modal

* feat(web): manage initial focus on FilterAddForm.tsx
---
 web/src/components/modals/index.tsx     | 2 +-
 web/src/forms/filters/FilterAddForm.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/components/modals/index.tsx b/web/src/components/modals/index.tsx
index b8dba1d..0a49f4a 100644
--- a/web/src/components/modals/index.tsx
+++ b/web/src/components/modals/index.tsx
@@ -163,7 +163,6 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
         as="div"
         static
         className="fixed z-10 inset-0 overflow-y-auto"
-        initialFocus={props.buttonRef}
         open={props.isOpen}
         onClose={handleClose}
       >
@@ -183,6 +182,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
               <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 flex justify-center">
                 <input
                   type="text"
+                  data-autofocus
                   className="w-96 shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-400 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
                   placeholder="Type 'I understand' to enable the button"
                   value={inputValue}
diff --git a/web/src/forms/filters/FilterAddForm.tsx b/web/src/forms/filters/FilterAddForm.tsx
index 72c6309..de6c191 100644
--- a/web/src/forms/filters/FilterAddForm.tsx
+++ b/web/src/forms/filters/FilterAddForm.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { Fragment } from "react";
+import { Fragment, useRef } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { toast } from "react-hot-toast";
@@ -24,6 +24,7 @@ interface filterAddFormProps {
 }
 
 export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
+  const inputRef = useRef(null)
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const mutation = useMutation({
@@ -51,7 +52,7 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
 
   return (
     <Transition show={isOpen} as={Fragment}>
-      <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
+      <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle} initialFocus={inputRef}>
         <div className="absolute inset-0 overflow-hidden">
           <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
             <TransitionChild
@@ -127,6 +128,7 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
                                     type="text"
                                     data-1p-ignore
                                     autoComplete="off"
+                                    ref={inputRef}
                                     className="block w-full shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
                                   />