React-select: pass through `id` prop

[macgyver]

just as className is appended to the class name of the rendered element, the passed in id attr should be used as the id for the rendered element.

This will allow <Select> components to work with the alternative label form, e.g.

<label htmlFor='my_input'>my input</label>
<Select id='my_input' {...props} />

[banderson]

I just noticed there's an inputProps prop which allows you to set the id on the input itself. Can you try that out?

[macgyver]

@banderson ooh that works perfectly for my use case, clicking the label now can focus the input.

[kumarharsh]

@macgyver apparently passing inputProps does nothing if the <Select> is not searchable...

This line:
https://github.com/JedWatson/react-select/blob/28281a2c57d176420f0ac26795e4d8492cf5bd62/src/Select.js#L776

renders a div instead of an input if the <Select> is not searchable, which causes a label's htmlFor to not trigger a focus on the associated select.

[macgyver]

that's a bummer :/

[Vadorequest]

Indeed, this bug is still present, providing an id props doesn't generate an ID in the HTML markup.

Using 1.0.0-rc.10

Edit: Updating to 1.2.1 fixed it!

[ItsTarik]

in version >= 2 to set the id on the Select use <Select inputId="foo" />.