Merge pull request #537 from auth0/email-input-fix

Fix email input in IE 10

src/ui/input/email_input.jsx

@@ -10,6 +10,14 @@ export default class EmailInput extends React.Component {
     this.state = {};
   }
 
+  shouldComponentUpdate(nextProps) {
+    const { invalidHint, isValid, value, onChange } = this.props;
+
+    return invalidHint != nextProps.invalidHint
+      || isValid != nextProps.isValid
+      || value != nextProps.value;
+  }
+
   render() {
     const { invalidHint, isValid, onChange, ...props } = this.props;
     const { focused } = this.state;
@@ -29,7 +37,7 @@ export default class EmailInput extends React.Component {
           placeholder="[email protected]"
           autoComplete="off"
           autoCapitalize="off"
-          onInput={::this.handleOnChange}
+          onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}
           {...props}/>

src/ui/input/username_input.jsx

@@ -9,6 +9,14 @@ export default class UsernameInput extends React.Component {
     this.state = {};
   }
 
+  shouldComponentUpdate(nextProps) {
+    const { invalidHint, isValid, value, onChange } = this.props;
+
+    return invalidHint != nextProps.invalidHint
+      || isValid != nextProps.isValid
+      || value != nextProps.value;
+  }
+
   render() {
     const { invalidHint, isValid, onChange, ...props } = this.props;
     const { focused } = this.state;

test/helper/ui.js

@@ -157,8 +157,7 @@ const check = (lock, query) => {
 const checkFn = query => lock => check(lock, query);
 export const clickTermsCheckbox = checkFn(".auth0-lock-sign-up-terms-agreement label input[type='checkbox']");
 const fillInput = (lock, name, str) => {
-  var method = name === "email" ? "input" : "change";
-  Simulate[method](qInput(lock, name, true), {target: {value: str}});
+  Simulate.change(qInput(lock, name, true), {target: {value: str}});
 };
 const fillInputFn = name => (lock, str) => fillInput(lock, name, str);