import { withYup } from "@remix-validated-form/with-yup" ; import { useRef } from "react" ; import { useActionData } from "remix" ; import { useField , ValidatedForm } from "remix-validated-form" ; import * as yup from "yup" ; import { Input } from "~/components/Input" ; import { SubmitButton } from "~/components/SubmitButton" ; const schema = yup . object ( { contactSelect : yup . string ( ) . required ( ) , something : yup . string ( ) . required ( ) } ) ; const validator = withYup ( schema ) ; const CustomInput = ( { name , label } ) => { const searchInputRef = useRef < HTMLInputElement > ( null ) ; useField ( name , { handleReceiveFocus : ( ) => searchInputRef . current ?. focus ( ) } ) ; return ( < > < input name = { name } type = "hidden" / > < input data - testid = { `search-${ name }` } id = { `search-${ name }` } name = { `search-${ name }` } ref = { searchInputRef } / > < />); } ; export default function FrontendValidation ( ) { const actionData = useActionData ( ) ; return ( < ValidatedForm validator = { validator } method = "post" > { actionData && < h1 > { actionData . message } < /h1>} < CustomInput name = "contactSelect" label = "Choose a contact" / > < Input name = "something" label = "Something" / > < SubmitButton /> < /ValidatedForm>); }