Open coderbyheart opened 2 years ago
Hey @coderbyheart! One of the RHF maintainers here. I just saw your issue on.. Twitter?.. for some reason; decided to pop in lol :P
If you're experiencing some unwanted UI behavior, it's most probably the web input's behavior, not RHF as it's only but a headless hook.
For select inputs, what I usually end up doing is
value
to an empty stringdefaultValue
to an empty stringThis way you gonna achieve your desired behavior.
<select {...register("destination")} defaultValue="">
<option value="" disabled>
Pick a destination region
</option>
{options.map(option => (
<option key={option.value} value={option.value}>{option.label}</option>
))}
</select>
Here's a working codesanbox
I'm willing to contribute some code, but I'll need some guidance 'cuz as I've mentioned above, I just stumbled upon your issue like 5 mins ago and I have no idea about your product xD
Hei, thanks for checking this out. I gues I was asking about another issue I have with react hook form.
However, in this case I am doing pretty much what you describe, but it does not have the effect: https://github.com/distributeaid/shipment-tracker/blob/5ec4f2deb86f18a29adfb846994cb51710a61bc7/frontend/src/pages/shipments/ShipmentForm.tsx#L179-L196
Thanks for providing a working example, this should help us figure out what is different in our codebase, that makes this not work.
Right now required single-select fields have the first value in the list pre-selected visually, but this value is not actually selected (and should not, since the user should actively make a choice).
The first disabled value should be shown as selected.
This needs someone who can figure out how to convince react-hook-form to behave this way.