From aaf907c834343970e1d30b3ef49c13ed5f9d34ed Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Sep 2024 09:01:04 +0700 Subject: add focus error when button submit click --- src-migrate/modules/register/components/Form.tsx | 43 ++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 118d9d69..b04e763c 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useMemo } from 'react'; +import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react'; import { useMutation } from 'react-query'; import { useRegisterStore } from '../stores/useRegisterStore'; import { RegisterProps } from '~/types/auth'; @@ -14,13 +14,15 @@ interface FormProps { required: boolean; isBisnisRegist: boolean; chekValid: boolean; + buttonSubmitClick: boolean; } const Form: React.FC = ({ type, required, isBisnisRegist = false, - chekValid = false, + chekValid, + buttonSubmitClick, }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); @@ -30,6 +32,11 @@ const Form: React.FC = ({ const router = useRouter(); const toast = useToast(); + const emailRef = useRef(null); + const nameRef = useRef(null); + const passwordRef = useRef(null); + const teleponRef = useRef(null); + const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; updateForm(name, value); @@ -40,6 +47,34 @@ const Form: React.FC = ({ mutationFn: (data: RegisterProps) => registerUser(data), }); + useEffect(() => { + const loadIndustries = async () => { + const response = await mutation.mutateAsync(form); + if (!response?.register) { + // Logic to focus on first invalid input + if (errors.email_partner && emailRef.current) { + emailRef.current.focus(); + return; + } + if (errors.name && nameRef.current) { + nameRef.current.focus(); + return; + } + + if (errors.password && passwordRef.current) { + passwordRef.current.focus(); + return; + } + + if (errors.phone && teleponRef.current) { + teleponRef.current.scrollIntoView(); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick]); + const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -101,6 +136,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='Masukan nama lengkap anda' value={form.name} + ref={nameRef} onChange={handleInputChange} aria-invalid={chekValid && !!errors.name} /> @@ -122,6 +158,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='Masukan alamat email anda' value={form.email} + ref={emailRef} onChange={handleInputChange} autoComplete='username' aria-invalid={chekValid && !!errors.email} @@ -143,6 +180,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='••••••••••••' value={form.password} + ref={passwordRef} onChange={handleInputChange} autoComplete='current-password' aria-invalid={chekValid && !!errors.password} @@ -163,6 +201,7 @@ const Form: React.FC = ({ id='phone' name='phone' className='form-input mt-3' + ref={passwordRef} placeholder='08xxxxxxxx' value={form.phone} onChange={handleInputChange} -- cgit v1.2.3 From 810c5da6e26fdfc4f29df75dca13c0fdb787f34a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 09:29:41 +0700 Subject: update auto scrool to when error --- src-migrate/modules/register/components/Form.tsx | 32 +++++++++++++----------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index b04e763c..55d542f2 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -26,7 +26,7 @@ const Form: React.FC = ({ }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); - + console.log('buttonSubmitClick', buttonSubmitClick); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); @@ -35,7 +35,7 @@ const Form: React.FC = ({ const emailRef = useRef(null); const nameRef = useRef(null); const passwordRef = useRef(null); - const teleponRef = useRef(null); + const phoneRef = useRef(null); const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; @@ -51,29 +51,33 @@ const Form: React.FC = ({ const loadIndustries = async () => { const response = await mutation.mutateAsync(form); if (!response?.register) { - // Logic to focus on first invalid input + const options: ScrollIntoViewOptions = { + behavior: 'smooth', + block: 'center', + }; + if (errors.email_partner && emailRef.current) { - emailRef.current.focus(); + emailRef.current.scrollIntoView(options); return; } if (errors.name && nameRef.current) { - nameRef.current.focus(); + nameRef.current.scrollIntoView(options); return; } if (errors.password && passwordRef.current) { - passwordRef.current.focus(); + passwordRef.current.scrollIntoView(options); return; } - if (errors.phone && teleponRef.current) { - teleponRef.current.scrollIntoView(); + if (errors.phone && phoneRef.current) { + phoneRef.current.scrollIntoView(options); return; } } }; loadIndustries(); - }, [buttonSubmitClick]); + }, [buttonSubmitClick, chekValid]); const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -133,7 +137,7 @@ const Form: React.FC = ({ type='text' id='name' name='name' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-700' placeholder='Masukan nama lengkap anda' value={form.name} ref={nameRef} @@ -155,7 +159,7 @@ const Form: React.FC = ({ type='text' id='email' name='email' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='Masukan alamat email anda' value={form.email} ref={emailRef} @@ -177,7 +181,7 @@ const Form: React.FC = ({ type='password' name='password' id='password' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='••••••••••••' value={form.password} ref={passwordRef} @@ -200,10 +204,10 @@ const Form: React.FC = ({ type='tel' id='phone' name='phone' - className='form-input mt-3' - ref={passwordRef} + className='form-input mt-3 transition-all duration-500' placeholder='08xxxxxxxx' value={form.phone} + ref={phoneRef} onChange={handleInputChange} aria-invalid={chekValid && !!errors.phone} /> -- cgit v1.2.3 From 4aface3ba2fa7c74a152ac0fe03b9e32e3ef68e1 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 10:06:14 +0700 Subject: update bug ga bisa pilih alamat --- src-migrate/modules/register/components/Form.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 55d542f2..cd0b4343 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -26,7 +26,6 @@ const Form: React.FC = ({ }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); - console.log('buttonSubmitClick', buttonSubmitClick); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); -- cgit v1.2.3