nhunzaker/bubble-ie10-issue.html

## bubble-ie10-issue.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>onChange Troubleshooting</title>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

    <script type="text/babel">
      var Hello = React.createClass({

        getInitialState() {
          return {
            first: '',
            second: ''
          }
        },

        changeDidBubble() {
          console.log('bubble!')
        },

        onFirstChange(event) {
          this.setState({
            first: event.target.value
          })
        },

        onSecondChange(event) {
          console.log("Typeof event.cancelBubble: ", typeof event.nativeEvent.cancelBubble)

          event.stopPropagation()

          this.setState({
            second: event.target.value
          })
        },

        render() {
          return (
            <div>
              <div onChange={ this.changeDidBubble }>
                <p>Bubbles:</p>
                <input value={ this.state.first } onChange={ this.onFirstChange } />
              </div>
              <div onChange={ () => console.log('This should never happen') }>
                <p>Stops propagation:</p>
                <input value={ this.state.second } onChange={ this.onSecondChange } />
              </div>
            </div>
          )
        }
      })

      ReactDOM.render(<Hello />, document.getElementById('container'))
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>onChange Troubleshooting</title>
	</head>
	<body>
	<div id="container"></div>

	<script src="https://fb.me/react-15.2.1.js"></script>
	<script src="https://fb.me/react-dom-15.2.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

	<script type="text/babel">
	var Hello = React.createClass({

	getInitialState() {
	return {
	first: '',
	second: ''
	}
	},

	changeDidBubble() {
	console.log('bubble!')
	},

	onFirstChange(event) {
	this.setState({
	first: event.target.value
	})
	},

	onSecondChange(event) {
	console.log("Typeof event.cancelBubble: ", typeof event.nativeEvent.cancelBubble)

	event.stopPropagation()

	this.setState({
	second: event.target.value
	})
	},

	render() {
	return (
	<div>
	<div onChange={ this.changeDidBubble }>
	<p>Bubbles:</p>
	<input value={ this.state.first } onChange={ this.onFirstChange } />
	</div>
	<div onChange={ () => console.log('This should never happen') }>
	<p>Stops propagation:</p>
	<input value={ this.state.second } onChange={ this.onSecondChange } />
	</div>
	</div>
	)
	}
	})

	ReactDOM.render(<Hello />, document.getElementById('container'))
	</script>
	</body>
	</html>