Merge pull request react-bootstrap#336 from heydiplo/multiple_select

getValue() should return all selected options for multiple select

Author: mtscout6

docs/src/ComponentsPage.js

@@ -517,7 +517,7 @@ var ComponentsPage = React.createClass({
                   The helper method <code>getInputDOMNode()</code> returns the internal input element.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/Input.js', 'utf8')} />
                   <h2 id="input-types">Types</h2>
-                  <p>Supports <code>select</code>, <code>textarea</code>, <code>static</code> as well as standard HTML input types.</p>
+                  <p>Supports <code>select</code>, <code>textarea</code>, <code>static</code> as well as standard HTML input types. <code>getValue()</code> returns an array for multiple select.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/InputTypes.js', 'utf8')} />
                   <h2 id="input-addons">Add-ons</h2>
                   <p>Use <code>addonBefore</code> and <code>addonAfter</code> for normal addons, <code>buttonBefore</code> and <code>buttonAfter</code> for button addons.

src/Input.jsx

@@ -37,7 +37,11 @@ var Input = React.createClass({
       return this.props.value;
     }
     else if (this.props.type) {
-      return this.getInputDOMNode().value;
+      if (this.props.type == "select" && this.props.multiple) {
+        return this.getSelectedOptions();
+      } else {
+        return this.getInputDOMNode().value;
+      }
     }
     else {
       throw Error('Cannot use getValue without specifying input type.');
@@ -48,6 +52,23 @@ var Input = React.createClass({
     return this.getInputDOMNode().checked;
   },
 
+  getSelectedOptions: function () {
+    var values = [];
+
+    Array.prototype.forEach.call(
+      this.getInputDOMNode().getElementsByTagName('option'),
+      function (option) {
+        if (option.selected) {
+          var value = option.getAttribute('value') || option.innerHTML;
+
+          values.push(value);
+        }
+      }
+    );
+
+    return values;
+  },
+
   isCheckboxOrRadio: function () {
     return this.props.type === 'radio' || this.props.type === 'checkbox';
   },

test/InputSpec.jsx

@@ -214,6 +214,30 @@ describe('Input', function () {
     assert.equal(instance.getChecked(), true);
   });
 
+  it('returns the only selected option for select', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Input type="select" value={'one'}>
+        <option value="one">one</option>
+        <option value="two">two</option>
+        <option value="three">three</option>
+      </Input>
+    );
+
+    assert.equal(instance.getValue(), 'one');
+  })
+
+  it('returns all selected options for multiple select', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Input type="select" multiple value={['one','two']}>
+        <option value="one">one</option>
+        <option value="two">two</option>
+        <option value="three">three</option>
+      </Input>
+    );
+
+    assert.deepEqual(instance.getValue(), ['one', 'two']);
+  })
+
   it('renders a disabled input correctly', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Input type="text" disabled={true} />