Last active
April 27, 2016 15:11
-
-
Save jimbolla/0b76552d74ebf5e99faaca533ba7e8c9 to your computer and use it in GitHub Desktop.
React 15 - IE11 autofill bug demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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