"Select" control does not support string with extra spaces as an option

[daniel-stoian-lgp]

Describe the bug
Recently, we migrated from knobs to controls using storybook 6.3.12 and we have usecases where a component must be tested with strings with extra spaces
When selecting a string with extra spaces( example "Hello there" with extra spaces between the 2 words) in a select control, the selected value is rendered as undefined and the text is not displayed in our components.

When we used knobs, the generated HTML select had each option with a value attribute. and there was no issue in using strings with extra spaces

With controls, the options don't have a value attribute.

When trying to select an option, the string with extra spaces appears with only 1 space

After selecting it, the dropdown looks as if no option is selected and the url is appended with this string: &value:!undefined

To Reproduce
In any select control, put a string with extra spaces or a string which starts with a space as an option and select it

[megbailey]

I have experienced this same issue when converting knobs to controls. Adding the additional space allowed us to bypass the sorting of numbered options as numbers allowing the options to show in the correct order when the label differed from the number value. Now, if the option has a different label, it is placed last in the list rather than in string order.

[oxcened]

I've submitted a pull request that fixes this 🎉

[anniepauline]

is it up for grabs?