Add test fixtures to cover disabled selected options

fixtures/dom/src/components/IssueList.js

@@ -0,0 +1,26 @@
+const React = window.React;
+
+function csv(string) {
+  return string.split(/\s*,\s*/);
+}
+
+export default function IssueList({issues}) {
+  if (!issues) {
+    return null;
+  }
+
+  if (typeof issues === 'string') {
+    issues = csv(issues);
+  }
+
+  let links = issues.reduce((memo, issue, i) => {
+    return memo.concat(
+      i > 0 && i < issues.length ? ', ' : null,
+      <a href={'https://github.com/facebook/react/issues/' + issue} key={issue}>
+        {issue}
+      </a>
+    );
+  }, []);
+
+  return <span>{links}</span>;
+}

fixtures/dom/src/components/TestCase.js

@@ -1,7 +1,9 @@
+const React = window.React;
+
 import cn from 'classnames';
 import semver from 'semver';
-import React from 'react';
 import PropTypes from 'prop-types';
+import IssueList from './IssueList';
 import {parse} from 'query-string';
 import {semverString} from './propTypes';
 
@@ -36,6 +38,7 @@ class TestCase extends React.Component {
       resolvedIn,
       resolvedBy,
       affectedBrowsers,
+      relatedIssues,
       children,
     } = this.props;
 
@@ -93,6 +96,9 @@ class TestCase extends React.Component {
 
           {affectedBrowsers && <dt>Affected browsers: </dt>}
           {affectedBrowsers && <dd>{affectedBrowsers}</dd>}
+
+          {relatedIssues && <dt>Related Issues: </dt>}
+          {relatedIssues && <dd><IssueList issues={relatedIssues} /></dd>}
         </dl>
 
         <p className="test-case__desc">

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

@@ -1,33 +1,75 @@
 const React = window.React;
 
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
 class SelectFixture extends React.Component {
   state = {value: ''};
   onChange = event => {
     this.setState({value: event.target.value});
   };
   render() {
     return (
-      <form>
-        <fieldset>
-          <legend>Controlled</legend>
-          <select value={this.state.value} onChange={this.onChange}>
-            <option value="">Select a color</option>
-            <option value="red">Red</option>
-            <option value="blue">Blue</option>
-            <option value="green">Green</option>
-          </select>
-          <span className="hint">Value: {this.state.value}</span>
-        </fieldset>
-        <fieldset>
-          <legend>Uncontrolled</legend>
-          <select defaultValue="">
-            <option value="">Select a color</option>
-            <option value="red">Red</option>
-            <option value="blue">Blue</option>
-            <option value="gree">Green</option>
-          </select>
-        </fieldset>
-      </form>
+      <FixtureSet title="Selects" description="">
+        <form className="field-group">
+          <fieldset>
+            <legend>Controlled</legend>
+            <select value={this.state.value} onChange={this.onChange}>
+              <option value="">Select a color</option>
+              <option value="red">Red</option>
+              <option value="blue">Blue</option>
+              <option value="green">Green</option>
+            </select>
+            <span className="hint">Value: {this.state.value}</span>
+          </fieldset>
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <select defaultValue="">
+              <option value="">Select a color</option>
+              <option value="red">Red</option>
+              <option value="blue">Blue</option>
+              <option value="gree">Green</option>
+            </select>
+          </fieldset>
+        </form>
+
+        <TestCase title="A selected disabled option" relatedIssues="2803">
+          <TestCase.Steps>
+            <li>Open the select</li>
+            <li>Select "1"</li>
+            <li>Attempt to reselect "Please select an item"</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The initial picked option should be "Please select an
+            item", however it should not be a selectable option.
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select defaultValue="">
+              <option value="" disabled>Please select an item</option>
+              <option>0</option>
+              <option>1</option>
+              <option>2</option>
+            </select>
+          </div>
+        </TestCase>
+
+        <TestCase title="An unselected disabled option" relatedIssues="2803">
+          <TestCase.ExpectedResult>
+            The initial picked option value should "0": the first non-disabled option.
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select defaultValue="">
+              <option disabled>Please select an item</option>
+              <option>0</option>
+              <option>1</option>
+              <option>2</option>
+            </select>
+          </div>
+        </TestCase>
+      </FixtureSet>
     );
   }
 }

fixtures/dom/src/style.css

@@ -8,23 +8,20 @@ html {
   font-size: 10px;
 }
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
   font-size: 1.4rem;
   margin: 0;
   padding: 0;
 }
 
-select {
-  width: 12rem;
-}
-
 button {
   margin: 10px;
   font-size: 18px;
   padding: 5px;
 }
 
-
 .header {
   background: #222;
   box-shadow: inset 0 -1px 3px #000;
@@ -34,6 +31,10 @@ button {
   padding: .8rem 1.6rem;
 }
 
+.header select {
+  width: 12rem;
+}
+
 .header__inner {
   display: table;
   margin: 0 auto;
@@ -101,7 +102,8 @@ fieldset {
   overflow: hidden;
 }
 
-ul, ol {
+ul,
+ol {
   margin: 0 0 2rem 0;
 }
 
@@ -212,3 +214,7 @@ li {
   background-color: #f4f4f4;
   border-top: 1px solid #d9d9d9;
 }
+
+.field-group {
+  overflow: hidden;
+}