Skip to content

Commit 4e733b3

Browse files
NedaManiNedaMani
committed
feat: Add auto-focus to form fields on modal open
1 parent 5a34da6 commit 4e733b3

File tree

10 files changed

+67
-4
lines changed

10 files changed

+67
-4
lines changed

‎src/app/(portal)/login/page.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,22 @@ import { schema, schemaType } from "@/schemas/login";
88
import { Button, Flex, Heading, Input, ErrorMessage } from "@/components/UI";
99
import errorToast from "@/functions/errorToast";
1010
import { useAuth } from "@/hooks/useUser";
11+
import { useEffect } from "react";
1112

1213
export default function LoginPage() {
1314
const router = useRouter();
1415
const {
1516
register,
1617
handleSubmit,
18+
setFocus,
1719
formState: { errors },
1820
} = useForm<schemaType>({ resolver: zodResolver(schema) });
1921
const { loginHandler, isLoading } = useAuth();
2022

23+
useEffect(() => {
24+
setFocus("username");
25+
}, []);
26+
2127
return (
2228
<div className="backdrop-blur-md text-base-content bg-base-100/60 max-w-xl w-full shadow-xl p-6 rounded-3xl">
2329
<Heading align="center" className="mb-8" as="h2" size="S">

‎src/app/(portal)/register/page.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import toast from "react-hot-toast";
99
import errorToast from "@/functions/errorToast";
1010
import { useAuth } from "@/hooks/useUser";
1111
import { chooseRandomName } from "@/functions/chooseRandomName";
12+
import { useEffect } from "react";
1213

1314
export default function RegisterPage() {
1415
const router = useRouter();
@@ -17,9 +18,14 @@ export default function RegisterPage() {
1718
register,
1819
handleSubmit,
1920
formState: { errors },
21+
setFocus,
2022
} = useForm<schemaType>({ resolver: zodResolver(schema) });
2123
const { registerHandler, isLoading } = useAuth();
2224

25+
useEffect(() => {
26+
setFocus("username");
27+
}, []);
28+
2329
return (
2430
<div className="backdrop-blur-md text-base-content bg-base-100/60 max-w-xl w-full shadow-xl p-6 rounded-3xl">
2531
<Heading align="center" className="mb-8" as="h2" size="S">

‎src/components/Modal/CreateModal/CreateBoard/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { schema, schemaType } from "@/schemas/modals/board";
1212
import Icon from "@/components/Icon";
1313
import { useCreateBoard } from "@/hooks/useBoards";
1414
import useActiveState from "@/store/useActiveState";
15+
import { useEffect } from "react";
1516

1617
interface CreateBoardModalProps {
1718
onClose: () => void;
@@ -23,6 +24,7 @@ export default function CreateBoardModal({ onClose }: CreateBoardModalProps) {
2324
handleSubmit,
2425
setValue,
2526
watch,
27+
setFocus,
2628
formState: { errors, isValid },
2729
} = useForm<schemaType>({
2830
resolver: zodResolver(schema),
@@ -39,6 +41,11 @@ export default function CreateBoardModal({ onClose }: CreateBoardModalProps) {
3941

4042
const { mutateAsync: CreateBoardAPI } = useCreateBoard();
4143

44+
useEffect(() => {
45+
const timer = setTimeout(() => setFocus("name"), 100);
46+
return () => clearTimeout(timer);
47+
}, []);
48+
4249
return (
4350
<Modal onClose={onClose} closeIcon={<Icon iconName="Close" />}>
4451
<Heading as="h3" align="center" className="mb-4">

‎src/components/Modal/CreateModal/CreateProject/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { schema, schemaType } from "@/schemas/modals/project";
1212
import Icon from "@/components/Icon";
1313
import { useCreateProject } from "@/hooks/useProjects";
1414
import useActiveState from "@/store/useActiveState";
15+
import { useEffect, useRef } from "react";
1516

1617
interface CreateProjectModalProps {
1718
onClose: () => void;
@@ -26,6 +27,7 @@ export default function CreateProjectModal({
2627
setValue,
2728
watch,
2829
formState: { errors, isValid },
30+
setFocus,
2931
} = useForm<schemaType>({
3032
resolver: zodResolver(schema),
3133
defaultValues: {
@@ -41,6 +43,11 @@ export default function CreateProjectModal({
4143

4244
const { mutateAsync: CreateProjectAPI } = useCreateProject();
4345

46+
useEffect(() => {
47+
const timer = setTimeout(() => setFocus("name"), 100);
48+
return () => clearTimeout(timer);
49+
}, []);
50+
4451
return (
4552
<Modal onClose={onClose} closeIcon={<Icon iconName="Close" />}>
4653
<Heading as="h3" align="center" className="mb-4">

‎src/components/Modal/CreateModal/CreateTask/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef, useState } from "react";
1+
import { useEffect, useRef, useState } from "react";
22
import Icon from "@/components/Icon";
33
import { Button, ErrorMessage, Heading, Input, Modal } from "@/components/UI";
44
import { schema, schemaType } from "@/schemas/modals/task";
@@ -24,6 +24,7 @@ export default function CreateTaskModal({ onClose }: CreateTaskModalProps) {
2424
setValue,
2525
watch,
2626
formState: { errors, isValid },
27+
setFocus,
2728
} = useForm<schemaType>({
2829
resolver: zodResolver(schema),
2930
defaultValues: {
@@ -51,6 +52,11 @@ export default function CreateTaskModal({ onClose }: CreateTaskModalProps) {
5152
const { activeBoardId } = useActiveState();
5253
const { mutateAsync: CreateTaskAPI } = useCreateTask();
5354

55+
useEffect(() => {
56+
const timer = setTimeout(() => setFocus("name"), 100);
57+
return () => clearTimeout(timer);
58+
}, []);
59+
5460
return (
5561
<Modal size="lg" onClose={onClose} closeIcon={<Icon iconName="Close" />}>
5662
<Heading as="h3" align="center" className="mb-4">
@@ -129,7 +135,7 @@ export default function CreateTaskModal({ onClose }: CreateTaskModalProps) {
129135

130136
async function onSubmit(data: schemaType) {
131137
if (!activeBoardId) return;
132-
CreateTaskAPI({ ...data, boardId: activeBoardId });
138+
CreateTaskAPI({ ...data, boardId: activeBoardId });
133139
onClose();
134140
}
135141
}

‎src/components/Modal/CreateModal/CreateWorkspace/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
import { schema, schemaType } from "@/schemas/modals/workspace";
1212
import { useCreateWorkspace } from "@/hooks/useWorkspaces";
1313
import Icon from "@/components/Icon";
14+
import { useEffect } from "react";
1415

1516
interface CreateWorkspaceModalProps {
1617
onClose: () => void;
@@ -25,6 +26,7 @@ export default function CreateWorkspaceModal({
2526
setValue,
2627
watch,
2728
formState: { errors, isValid },
29+
setFocus,
2830
} = useForm<schemaType>({
2931
resolver: zodResolver(schema),
3032
defaultValues: {
@@ -38,6 +40,11 @@ export default function CreateWorkspaceModal({
3840

3941
const { mutateAsync: CreateWorkspaceAPI } = useCreateWorkspace();
4042

43+
useEffect(() => {
44+
const timer = setTimeout(() => setFocus("name"), 100);
45+
return () => clearTimeout(timer);
46+
}, []);
47+
4148
return (
4249
<Modal onClose={onClose} closeIcon={<Icon iconName="Close" />}>
4350
<Heading as="h3" align="center" className="mb-4">

‎src/components/Modal/EditModal/EditBoard/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default function EditBoardModal({ onClose }: EditBoardModalProps) {
2626
setValue,
2727
watch,
2828
formState: { errors, isValid },
29+
setFocus,
2930
reset,
3031
} = useForm<schemaType>({
3132
resolver: zodResolver(schema),
@@ -53,6 +54,11 @@ export default function EditBoardModal({ onClose }: EditBoardModalProps) {
5354
getBoardData();
5455
}, [activeBoardId, reset]);
5556

57+
useEffect(() => {
58+
const timer = setTimeout(() => setFocus("name"), 100);
59+
return () => clearTimeout(timer);
60+
}, []);
61+
5662
return (
5763
<Modal onClose={onClose} closeIcon={<Icon iconName="Close" />}>
5864
<Heading as="h3" align="center" className="mb-4">

‎src/components/Modal/EditModal/EditProject/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Icon from "@/components/Icon";
1313
import { useEditProject } from "@/hooks/useProjects";
1414
import useActiveState from "@/store/useActiveState";
1515
import { GetOneProjectAPI } from "@/services/project";
16-
import { useEffect } from "react";
16+
import { useEffect, useRef } from "react";
1717

1818
interface EditProjectModalProps {
1919
onClose: () => void;
@@ -26,6 +26,7 @@ export default function EditProjectModal({ onClose }: EditProjectModalProps) {
2626
setValue,
2727
watch,
2828
formState: { errors, isValid },
29+
setFocus,
2930
reset,
3031
} = useForm<schemaType>({
3132
resolver: zodResolver(schema),
@@ -48,6 +49,11 @@ export default function EditProjectModal({ onClose }: EditProjectModalProps) {
4849
getProjectData();
4950
}, [activeProjectId, reset]);
5051

52+
useEffect(() => {
53+
const timer = setTimeout(() => setFocus("name"), 100);
54+
return () => clearTimeout(timer);
55+
}, []);
56+
5157
return (
5258
<Modal onClose={onClose} closeIcon={<Icon iconName="Close" />}>
5359
<Heading as="h3" align="center" className="mb-4">

‎src/components/Modal/EditModal/EditTask/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default function EditTaskModal({ onClose }: EditTaskModalProps) {
2525
setValue,
2626
watch,
2727
formState: { errors, isValid },
28+
setFocus,
2829
reset,
2930
} = useForm<schemaType>({
3031
resolver: zodResolver(schema),
@@ -79,6 +80,11 @@ export default function EditTaskModal({ onClose }: EditTaskModalProps) {
7980
getTaskData();
8081
});
8182

83+
useEffect(() => {
84+
const timer = setTimeout(() => setFocus("name"), 100);
85+
return () => clearTimeout(timer);
86+
}, []);
87+
8288
return (
8389
<Modal size="lg" onClose={onClose} closeIcon={<Icon iconName="Close" />}>
8490
<Heading as="h3" align="center" className="mb-4">

‎src/components/Modal/EditModal/EditWorkspace/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useEditWorkspace } from "@/hooks/useWorkspaces";
1313
import Icon from "@/components/Icon";
1414
import useActiveState from "@/store/useActiveState";
1515
import { GetOneWorkspaceAPI } from "@/services/workspace";
16-
import { useEffect } from "react";
16+
import { useEffect, useRef } from "react";
1717

1818
interface EditWorkspaceModalProps {
1919
onClose: () => void;
@@ -28,6 +28,7 @@ export default function EditWorkspaceModal({
2828
setValue,
2929
watch,
3030
formState: { errors, isValid },
31+
setFocus,
3132
reset,
3233
} = useForm<schemaType>({
3334
resolver: zodResolver(schema),
@@ -49,6 +50,11 @@ export default function EditWorkspaceModal({
4950
getWorkspaceData();
5051
}, [activeWorkspaceId, reset]);
5152

53+
useEffect(() => {
54+
const timer = setTimeout(() => setFocus("name"), 100);
55+
return () => clearTimeout(timer);
56+
}, []);
57+
5258
return (
5359
<Modal onClose={onClose} closeIcon={<Icon iconName="Close" />}>
5460
<Heading as="h3" align="center" className="mb-4">

0 commit comments

Comments
 (0)