Conditionally disabled select option in React

Question

I built my own React select component and would like to have an option to set the default value to be disabled

The component basically looks like this:

<select
    id={this.props.id}
    name={this.props.name}
    value={this.props.value}
    defaultValue={this.props.default}
    onClick={this.handleFieldClick}
    onChange={this.handleFieldChange} >

         <option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

         { Object.keys(this.props.options).map((val, i) => ( 
             <option key={i} value={val}>{this.props.options[val]}</option>
         ))}

 </select>

This line giving me the issue is the following:

<option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

The "disabled" option is still selectable and renders like this:

<option value="" selected="">Default Option</option>

I believe it's because the correct syntax for a disabled option is <option disabled ></option>, not <option disabled="true" ></option>

But when I format my JSX as follows:

<option value="" {this.defaultDisabled ? "disabled" : ""} >{this.props.defaultLabel}</option>

I get an error that crashes the app.

What is the correct syntax for conditionally writing a directive value into a tag with JXS and/or conditionally set a disabled option in React?

Scyphate

React should handle boolean elements correctly, i.e. <option disabled={true}>...</option> should render as <option disabled>...</option>, so it should behave as you want. When you say you're getting an issue from that, what issue exactly, and where is that issue coming from? – Beatriz

the issue is that the disabled option is still selectable – Scyphate

Looking at that again, you have an error in your code: disabled={this.defaultDisabled ? true : false} should be disabled={this.props.defaultDisabled ? true : false} (you missed a .props). Assuming that's coming directly from your code that would explain the issue. – Beatriz

godammit! you have no idea how many times Ive looked at that code and still missed it. thank you. – Scyphate

I do know, because we've all done it :D – Beatriz

Answer 1

You missed a .props. And you can also use null instead of false.

<option value="" disabled={this.props.defaultDisabled ? true : null} >{this.props.defaultLabel}</option>

Cigarillo

Why null and not false? – Skeg

@MenaiAlaEddine-Aladdin you can use null, but false works as well – Morality

Answer 2

After a couple of time, I finally fixed the issue.

It seems that in React to use selected attribute on the HTML tag is not recommended. The best ways to set a default value is to use defaultValue If you use it, it will throw an error in development and keep quiet in production.

More info can be found here

How to avoid such error

• Step one

  1. Give default value to HTML select Tag

     <select
       name="originId"
       defaultValue="Choose-origin"
     >

2. Give option tag the value which is equal to defaultValue of select

     <option
        value="Choose-origin"     // normally in VanillaJS you would use "selected"
        disabled
     >Choose origin</option>

3. Remember to disable the option tags so that you deny the user to click it.

Thanks, to @Neo Choi and @Bernard Leech for help.

Irmine

Answer 3

This should work:

    <option 
      value=""
      disabled={this.props.defaultDisabled}
    >
      {this.props.defaultLabel}
    </option>

Chigger