code-forge-io / code-forge-io/remix-hook-form
Controlled react-select input not being captured during submition
- Dominant language
- TypeScript
- Stars
- 453
- Forks
- 43
- PR merge metrics
- No merged PRs in 30d
Description
i use remix-hook-fom in my project. I struggled trying to use it with [React Select](https://react-select.com/). here is my controlled React Select code:
``` jsx
import { useId } from 'react'
import { Controller, FieldError, get } from 'react-hook-form'
import ReactSelect from 'react-select'
import { useRemixFormContext } from 'remix-hook-form'
import { useHydrated } from 'remix-utils/use-hydrated'
import { twMerge } from 'tailwind-merge'
import { CustomOption } from './custom-option'
import { SelectProps } from './type'
export const Select = >(
props: SelectProps
) => {
const isHydrated = useHydrated()
const {
name,
id,
label,
onChange,
className,
containerClassName,
errorClassName,
disabled,
labelClassName,
required,
isSearchable = false,
size = 'md',
...rest
} = props
const generatedId = useId()
const {
control,
formState: { errors }
} = useRemixFormContext()
const error: FieldError = get(errors, name)
return (
{label && (
{label} {required && *}
)}
{isHydrated ? (
{
return (
{
if (onChange) {
onChange(newValue, actionMeta)
}
field.onChange(newValue)
}}
value={field.value}
isSearchable={isSearchable}
isDisabled={disabled}
className={className}
{...rest}
/>
)
}}
/>
) : (
)}
{error && (
{error?.message?.toString()}
)}
)
}
```
and here is my implementation:
```jsx
export const createDepositSchema = z.object({
bank: z.object({
label: z.string(),
value: z.string()
})
})
```
```jsx
const fetcher = useFetcher()
const formMethods = useRemixForm({
mode: 'onSubmit',
resolver: zodResolver(createDepositSchema),
stringifyAllValues: false,
fetcher
})
const {
bank: watchedBank,
} = watch()
console.log(watchedBank) // the value is captured here
required
labelClassName="text-white"
label="Bank Transfer"
name="bank"
options={[
{label: 'BNI', value: '1'},
{label: 'BCA', value: '2'},
{label: 'BRI', value: '3'},
{label: 'Mandiri', value: '4'},
]}
/>
```
and here is my action:
``` jsx
import { zodResolver } from '@hookform/resolvers/zod'
import { ActionFunctionArgs } from '@remix-run/node'
import { getValidatedFormData } from 'remix-hook-form'
import { createDepositSchema, TCreateDeposit } from '@/schemas/deposit'
export const action = async ({ request }: ActionFunctionArgs) => {
const {
errors,
data: formData,
receivedValues: defaultValues
} = await getValidatedFormData(
request,
zodResolver(createDepositSchema),
true
)
if (errors) {
console.log(errors)
return Response.json(
{ success: false, errors, defaultValues },
{ status: 400 }
)
}
console.log(formData)
return null
}
```
when i try to `console.log ` the value in the client, it is there as expected. but once i submit the form, it is not being captured in the action by `getValidatedFormData` and returns validation error. I try to debug it by adding `.optional()` to the schema, it turns out that the data is empty. the `bank` field didn't event sent to the action.
before submitting this issue, i have tried all possible options in. `stringifyAllValues` as well as in `preserveStringified`, but nothing happens.
in another remix roject where i use plain `useForm` with `useFormContext` from [React Hook Form](https://react-hook-form.com), it works just fine.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.