Add comment about why size is assigned on select create. Tests

I added some more clarification for why size must be set on select
element creation:

- In the source code
- In the DOM test fixture
- In a unit test

fixtures/dom/src/components/fixtures/selects/index.js

@@ -205,9 +205,10 @@ class SelectFixture extends React.Component {
 
         <TestCase
           title="A select with the size attribute should not set first option as selected"
-          relatedIssues="14239">
+          relatedIssues="14239"
+          introducedIn="16.0.0">
           <TestCase.ExpectedResult>
-            First option should not be set
+            No options should be selected.
           </TestCase.ExpectedResult>
 
           <div className="test-fixture">
@@ -217,6 +218,17 @@ class SelectFixture extends React.Component {
               <option>2</option>
             </select>
           </div>
+
+          <p className="footnote">
+            <b>Notes:</b> This happens if <code>size</code> is assigned after
+            options are selected. The select element picks the first item by
+            default, then it is expanded to show more options when{' '}
+            <code>size</code> is assigned, preserving the default selection.
+          </p>
+          <p className="footnote">
+            This was introduced in React 16.0.0 when options were added before
+            select attribute assignment.
+          </p>
         </TestCase>
       </FixtureSet>
     );

packages/react-dom/src/__tests__/ReactDOMSelect-test.js

@@ -362,6 +362,32 @@ describe('ReactDOMSelect', () => {
     expect(node.options[2].selected).toBe(true); // gorilla
   });
 
+  it('does not select an item when size is initially set to greater than 1', () => {
+    let stub = (
+      <select size="2">
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    const select = ReactDOM.render(stub, container);
+
+    expect(select.options[0].selected).toBe(false);
+    expect(select.options[1].selected).toBe(false);
+    expect(select.options[2].selected).toBe(false);
+
+    // Note: There is an inconsistency between JSDOM and Chrome where
+    // Chrome reports an empty string when no value is selected for a
+    // single-select with a size greater than 0. JSDOM reports the first
+    // value
+    //
+    // This assertion exists only for clarity of JSDOM behavior:
+    expect(select.value).toBe('monkey'); // "" in Chrome
+    // Despite this, the selection index is correct:
+    expect(select.selectedIndex).toBe(-1);
+  });
+
   it('should remember value when switching to uncontrolled', () => {
     let stub = (
       <select value={'giraffe'} onChange={noop}>

packages/react-dom/src/client/ReactDOMComponent.js

@@ -411,6 +411,10 @@ export function createElement(
         if (props.multiple) {
           node.multiple = true;
         } else if (props.size) {
+          // Setting a size greater than 1 causes a select to behave like `multiple=true`, where
+          // it is possible that no option is selected.
+          //
+          // This is only necessary when a select in "single selection mode".
           node.size = props.size;
         }
       }