Skip to content

Instantly share code, notes, and snippets.

@jimbolla
Last active April 27, 2016 15:11
Show Gist options
  • Save jimbolla/0b76552d74ebf5e99faaca533ba7e8c9 to your computer and use it in GitHub Desktop.
Save jimbolla/0b76552d74ebf5e99faaca533ba7e8c9 to your computer and use it in GitHub Desktop.
React 15 - IE11 autofill bug demo
{
"name": "react-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-polyfill": "6.7.4",
"react": "15.0.1",
"react-dom": "15.0.1"
},
"devDependencies": {
"babel": "6.5.2",
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"httpdispatcher": "1.0.0",
"webpack": "1.13.0"
}
}
var http = require('http');
var dispatcher = require('httpdispatcher');
const PORT = 8081;
dispatcher.setStaticDirname('');
dispatcher.setStatic('');
function handleRequest(request, response) {
try {
console.log(request.url);
dispatcher.dispatch(request, response);
} catch(err) {
console.log(err);
}
}
http
.createServer(handleRequest)
.listen(PORT, () => console.log("Server listening on: http://localhost:%s", PORT));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<script src="bundle.js"></script>
<script type="text/javascript">Test.run();</script>
</body>
</html>
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
class SubmitTest extends React.Component {
constructor() {
super();
this.state = {
username: '',
usernameChanges: 0,
password: '',
passwordChanges: 0,
};
}
render() {
return (
<form onSubmit={evt => {
evt.preventDefault();
this.setState({ submitted: true });
}}>
<div>
Username:
<input
value={this.state.username}
onChange={evt => {
const username = evt.target.value;
this.setState(state => ({ username, usernameChanges: state.usernameChanges + 1 }));
}}
/>
{this.state.usernameChanges}
</div>
<div>
Password:
<input
type="password"
value={this.state.password}
onChange={evt => {
const password = evt.target.value;
this.setState(state => ({ password, passwordChanges: state.passwordChanges + 1 }));
}}
/>
{this.state.passwordChanges}
</div>
<div>
<button type="submit">Submit</button>
</div>
<div>
In state:
<pre>{JSON.stringify(this.state)}</pre>
</div>
</form>
);
}
}
export const run = (settings) => {
const container = document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(<SubmitTest />, container);
};
module.exports = {
context: __dirname,
entry: {
'bundle.js': './test.js',
},
output: {
path: __dirname,
filename: '[name]',
library: 'Test'
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.(jsx|js)$/,
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
},
devtool: 'source-map'
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment