Setting select value to null or undefined does not change to placeholder-like option

Maybe this is just an ugly pattern of the web, but it’s pretty typical to have the first option of a select be a sort of placeholder like item.

<select>
  <option value=''>Select a thing</option>
  ....more options
</select>

When implemented with react, I would expect if i set the prop value of the select to null || undefined it would change to the placeholder-like option. But it seems you have to pass an empty string value to pull it off. I’m not sure if this is something React should mask/handle or not. It seems more like an oddity of the browser… So I am suggesting one of two things:

1. Have null || undefined value props choose an empty value option.
2. invariant warn passing null || undefined is non-effective.

jsbin example

[mahadehassan34]

05 10 1995

[tkrotoff]

If someone pass by, here what I do to have a select “placeholder”:

<select name="month"
        value={this.props.month ? this.props.month : ''}
        onChange={handleChange}>
  <option value="" disabled>Month</option>
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>

If month is null or undefined => value is '' (empty string).

You could also write:

• value={this.props.month ? this.props.month : '0'} + <option value="0" disabled>Month</option>
• or value={'' + this.props.month} + <option value="undefined">Month</option>

But I don’t recommend it and you should stay with <option value="" ...> instead because HTML5 validation with attribute required only works if the value of the first option element in the select element’s list of options (if any) is the empty string.

Visually:

Since Month is disabled, the user cannot select it. If you don’t want Month to be displayed in the list, used the hidden attribute (works perfectly under Chrome 54 and Firefox 47; not/partially under IE 11, Edge 38 and Safari 10).