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
This commit is contained in:
martylukyy 2024-09-11 15:54:34 +02:00 committed by GitHub
parent e603b262f7
commit 00b5728b4a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 3 deletions

View file

@ -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"
/>