Bug: Initial select value is always the first option

[philipjohn]

When using the SelectControl component, the initial value for the select element upon page load uses the value of the first child option element, rather than having no - or an empty - value. The appearance of the select is that it has a default option, but this is not the case and so the normal behaviour of the browser is to default to choosing the first option for the value.

To Reproduce
Steps to reproduce the behavior:

1. Open the Components Demo page in WP Admin
2. Using the console, observe the values for the 3 three drop downs as follows:
3. document.getElementById("inspector-select-control-0").value shows "2nd"
4. document.getElementById("inspector-select-control-1").value shows "1st"
5. document.getElementById("inspector-select-control-0").value shows "1st"
6. Add the following code after the second SelectControl component in componentsDemo/index.js:

{ selectValue2 == '1st' && (
	<p>1st is selected!</p>
) }
{ selectValue2 == '2nd' && (
	<p>2nd is selected!</p>
) }

7. Reload the page and observe there is no text after the second drop down
8. From the second drop down select "First"
9. Observe that there is still no text below the drop down
10. Select "Second" from the drop down
11. Observe that the text "2nd is selected!" appears below the drop down
12. Select "First" from the drop down
13. Observe that the text "1st is selected!" appears below the drop down.

When we selected "First" in step 8 we should have seen text appear. We didn't because the value was already "1st" and so state did not change even though we selected that first item. Only by changing state in 10 and back again in 12 are we able to see the text we were expecting.

[iuravic]

5. document.getElementById("inspector-select-control-0").value shows "1st"

I'm guessing this one's supposed to be inspector-select-control-2, right? :)

Basically, the issue is that the click on the 1st option is not detected properly. And this is due to how the select HTML element works and is handled by the browsers. If we pasted this plain, also empty select element among the Component demo code

<select>
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="mercedes">Mercedes</option>
	<option value="audi">Audi</option>
</select>

• and reload the page,
• then click only once on the select to open the selection up,
  => it will also appear as if the 1st option is selected, even though it’s not. However the value is not of the first selection.

In the same manner, if we pasted this where you suggest the code above to be pasted:

{ true && (
	<p>initial value::{ selectValue2 } </p>
) }

and reloaded the page, we'll confirm that the initial value indeed is null, even though the browser puts a check-mark next to the 1st option as if it was selected (but is not).

I'd suggest we should try and not add a new blank first option -- a blank one with the same label and value null -- but rather try and fix that the onChange detects the first click on the 1st option. It might be an issue with how the browser handles the select element, though. And if we can't update the event, then yes, we'd probably have to add a blank 1st value, or come up with a similar solution.

[philipjohn]

It might be an issue with how the browser handles the select element, though

I'm assuming this is the case, yeah, and that we can't address this because it's the browser behaviour that we have little control over.

In my use-case I've added a blank first option, and I've submitted a proposal to Gutenberg for the ability to use the disabled attribute so that the blank option isn't a true option.