When using native form validation and loading a page with a form containing an input with the `required` prop set, it triggers browser validation immediately. This produces Firefox's native error highlighting. This is because Firefox appears to run validation when the DOM is used to set a value on an existing input component. 

The behavior can be seen here: http://codepen.io/anon/pen/zowOzo

Angular has [run into this already](https://github.com/ggershoni/angular.js/commit/cc311740c6b680c68a88c44fecd97ede1f18f831).

import Fixture from '../../Fixture';
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
import InputTestCase from './InputTestCase';
const React = window.React;
class TextInputFixtures extends React.Component {
  render() {
    return (
      <FixtureSet
        title="Inputs"
        description="Common behavior across controlled and uncontrolled inputs">
        <TestCase title="Numbers in a controlled text field with no handler">
          <TestCase.Steps>
            <li>Move the cursor to after "2" in the text field</li>
            <li>Type ".2" into the text input</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            The text field's value should not update.
          </TestCase.ExpectedResult>
          <Fixture>
            <div className="control-box">
              <fieldset>
                <legend>Value as number</legend>
                <input value={2} onChange={() => {}} />
              </fieldset>
              <fieldset>
                <legend>Value as string</legend>
                <input value={'2'} onChange={() => {}} />
              </fieldset>