react-select cannot set id

Question

Have a react-select component and the id field does not get set? Is it possible to set an id?

<Select
    id={field}
    className="reqform-project-dropdown"
    {...f.props(field)}
    disabled={
        readOnly ||
        onEdit ||
        f.props(field).read_only
    }
    clearable={false}
    options={this.props.common.tests}
    onChange={this.handleProjChange.bind(this, field,
        f.props(field).multiple,
        'test_req_unique_prefix')}
    labelKey="test_name"
    valueKey="test_req_unique_prefix"
/>

I have resorted to setting the id of the parent div, but it seems silly I can't do it directly for the select.

Answer 1

In version >= 2 of react-select, the prop to set the id is called inputId . Use it like this:

<Select inputId="your-custom-id" />

Answer 2

You can use the inputProps prop as in the docs.

If what you want is focus when clicking the corresponding label, passing id inside inputProps should work.

<label htmlFor={'fieldId'} />
<Select inputProps={{ id: 'fieldId' }} /> // should be an object

Answer 3

I didn't see anything about setting an id attribute in their docs but you can use ref to get a refference to the DOM element and add it through this object.

class App extends React.Component {
  componentDidMount() {
    this.select.wrapper.id = "myId";
  }

  render() {
    return (
      <div>
        <Select
          ref={ref => { this.select = ref; }}
        />
      </div>
    );
  }
}