React-select: [v2] Bug - Label with htmlFor not triggering focus

[brunocramos]

When using label with htmlFor, its referenced element is not triggering focus. Here is a sandbox with an example:

https://codesandbox.io/s/3r4l5o2qwp

React: 16.3.2
React-Select: 2.0.0-beta.6

Test case steps

• Clicking "first" triggers focus on the first select, which is the default html select behavior.
• Clicking "second" does nothing

This prevents us from advanced styling with label, such as this case:

The text element in the first image is a label on top of react-select, and clicking on it does not open/focus the select. I can only start typing clicking outside the label.

[someden]

Use inputId instead id

<label htmlFor="second">second</label>
<Select options={options} name="second" inputId="second" />

[brunocramos]

@someden awesome, that did the work. Thanks

[T04435]

You can add openMenuOnFocus to open the menu on label click.