Replies: 5 comments
This comment has been minimized.
This comment has been minimized.
-
To give better context to this issue... GoalLet's say the you want a form with an input the let you select a date, but you want to set a default date. This does not workconst Component = () => {
const { register } = useForm({
defaultValue: {
day: new Date("2024-12-31"),
}
})
return <input type="date" {...register('day', {valueAsDate: true })} />
} This works - use Controller APIIf you instead switch from
const Component = () => {
const { register } = useForm({
defaultValue: {
day: new Date("2024-12-31"),
}
})
return (
<Controller
control={control}
name="day"
render={({field}) => (
<input
{...field}
type="date"
value={field.value ? field.value.toISOString().substring(0,10) : undefined}
onChange={( {target:{value}} ) => field.onChange( value === '' ? undefined : new Date(value) ) }
/>
)}
/>
)
} ConsiderationBut this means that you cannot choose which api to use (register or Controller), but as soon as you need a date input you MUST use the controller api, which is less performant Open QuestionWhy not exposed in the registr api a similar way to manipulate the value between react-hook-form state and html input state (DOM state) ?? <input
type="date"
{...register("day", {
// input value => react-hook-form state
getValueFromInputAs: value => value === '' ? undefined : new Date(value),
// react-hook-form-state => input value
setValueToInputAs: value => value ? value.toISOString().substring(0,10) : undefined,
})}
/> This works - use string instead of
|
Beta Was this translation helpful? Give feedback.
-
Feature requestWhy not exposeing in the Something like <input
type="date"
{...register("day", {
// input value => react-hook-form state
getValueFromInputAs: value => value === '' ? undefined : new Date(value),
// react-hook-form-state => input value
setValueToInputAs: value => value ? value.toISOString().substring(0,10) : undefined,
})}
/> |
Beta Was this translation helpful? Give feedback.
-
I am having this issue as well. |
Beta Was this translation helpful? Give feedback.
-
same problem with date indeed |
Beta Was this translation helpful? Give feedback.
-
What
Doing this...
... result in this
an "input" in blank/empty state, instead of showing an already selected date.
This means that the defaultValue defined in
useForm
is not respected.Even if we define
defaultValue
as input props the outcome is the sameVersion Number
7.51.3
Codesandbox/Expo snack
https://stackblitz.com/edit/vitejs-vite-v95kgv?file=src%2Fsections%2Foriginal-issue.tsx
Steps to reproduce
day
) that looks as "empty" even if default value is presentwatch
show that default value is memory state is correctNote 1
It seems that the culprit is the
ref
returned fromregister
that is some way overwritedefaultValue
.Look for
day3
input where i omitted passingref
and it show the default value correctly.Because there is no
ref
, it's not a valid workaround. react hooks form can no longer track field value changes.Note 2
A workaround is to use
useEffect
and update the value of the field after first render.Look for
day2
input where I did this. It show the default value correctly.But it's "hacky" and inconvenient.
Expected behaviour
This code should let the browser input field show that a date is already selected.
Now it show a blank/empty state.
Tested only in Chrome.
What browsers are you seeing the problem on?
Chrome
Relevant log output
No response
Code of Conduct
Beta Was this translation helpful? Give feedback.
All reactions