title: why does ReactJS suppress changes in <input> elements but not in e.g. <select> elements
body: <p>Here's a SSCCE to illustrate my question:</p>
  
  <pre><code>const React = require('react');
  
  const App = React.createClass({
      getInitialState: function() {
          return {
              text: 'foo',
              selection: 'apples'
          };
      }
      , render: function() {
          return (
              &lt;div&gt;
                  &lt;div&gt;                
                      &lt;input type='text' value={this.state.text}/&gt;
                  &lt;/div&gt;
                  &lt;select&gt;
                      &lt;option value='bananas' selected={this.state.selection==='bananas'}&gt;bananas&lt;/option&gt;                
                      &lt;option value='apples'  selected={this.state.selection==='apples'} &gt;apples &lt;/option&gt;                    
                      &lt;option value='onions'  selected={this.state.selection==='onions'} &gt;onions &lt;/option&gt;                
                  &lt;/select&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>The above React component when rendered, displays (unsurprisingly) the below view:</p>
  
  <p><a href="https://i.stack.imgur.com/8kKu8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8kKu8.png" alt="enter image description here"></a></p>
  
  <p>The model is taken into account as expected.</p>
  
  <p>When one tries to type into the <code>&lt;input&gt;</code> element nothing happens. The explanation is that ReactJS uses one way flow and you have to add <code>onchange</code> listeners to update the model etc. That's fine.</p>
  
  <p>What I don't get is why ReactJS prevents the <code>&lt;input&gt;</code> element from changing and forces it to always reflect the model value that flowed down to it, whereas at the same time it allows me to change the <code>&lt;select&gt;</code> element:</p>
  
  <p><a href="https://i.stack.imgur.com/mkYBv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mkYBv.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/El20c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/El20c.png" alt="enter image description here"></a></p>
  
  <p>Apparently my mental model is lacking. What am I missing ?</p>