Single-select drop down should not have pre-filled value (react-hook-form issue)

[coderbyheart]

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.

[Moshyfawn]

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

• Have a default "Select a value" placeholder option (can be disabled for sure)
• Set the placeholder option value to an empty string
• Set the select field defaultValue to an empty string

This 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

[coderbyheart]

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:

shipment-tracker/frontend/src/pages/shipments/ShipmentForm.tsx

Lines 179 to 196 in 5ec4f2d

	<SelectField
	options={[
	{
	label: 'Pick an origin region',
	value: '',
	disabled: true,
	},
	...regions.map((region) => ({
	label: formatRegion(region),
	value: region.id,
	})),
	]}
	label="Origin region"
	name="origin"
	register={register}
	required
	errors={errors}
	/>

Thanks for providing a working example, this should help us figure out what is different in our codebase, that makes this not work.