idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 00:39:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): manage initial focus for force run modal and filter add form (#1713)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/modals/index.tsx
View file

@ -163,7 +163,6 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
as="div" as="div"
static static
className="fixed z-10 inset-0 overflow-y-auto" className="fixed z-10 inset-0 overflow-y-auto"
initialFocus={props.buttonRef}
open={props.isOpen} open={props.isOpen}
onClose={handleClose} 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"> <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 flex justify-center">
<input <input
type="text" 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" 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" placeholder="Type 'I understand' to enable the button"
value={inputValue} value={inputValue}

6
web/src/forms/filters/FilterAddForm.tsx
View file

@ -3,7 +3,7 @@
* SPDX-License-Identifier: GPL-2.0-or-later * 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 { useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "@tanstack/react-router"; import { useNavigate } from "@tanstack/react-router";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
@ -24,6 +24,7 @@ interface filterAddFormProps {
} }
export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) { export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
const inputRef = useRef(null)
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const navigate = useNavigate(); const navigate = useNavigate();
const mutation = useMutation({ const mutation = useMutation({
@ -51,7 +52,7 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
return ( return (
<Transition show={isOpen} as={Fragment}> <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"> <div className="absolute inset-0 overflow-hidden">
<DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16"> <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<TransitionChild <TransitionChild
@ -127,6 +128,7 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
type="text" type="text"
data-1p-ignore data-1p-ignore
autoComplete="off" 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" 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"
/> />