Add focus handling to validation

Update the Field component and validation handling to show / hide validation
feedback on focus / blur events.

src/components/views/elements/Field.js

@@ -53,20 +53,53 @@ export default class Field extends React.PureComponent {
         };
     }
 
-    onChange = (ev) => {
+    onFocus = (ev) => {
-        if (this.props.onValidate) {
+        this.validate({
-            const result = this.props.onValidate(ev.target.value);
+            value: ev.target.value,
-            this.setState({
+            focused: true,
-                valid: result.valid,
-                feedback: result.feedback,
         });
+        // Parent component may have supplied its own `onFocus` as well
+        if (this.props.onFocus) {
+            this.props.onFocus(ev);
         }
+    };
+
+    onChange = (ev) => {
+        this.validate({
+            value: ev.target.value,
+            focused: true,
+        });
         // Parent component may have supplied its own `onChange` as well
         if (this.props.onChange) {
             this.props.onChange(ev);
         }
     };
 
+    onBlur = (ev) => {
+        this.validate({
+            value: ev.target.value,
+            focused: false,
+        });
+        // Parent component may have supplied its own `onBlur` as well
+        if (this.props.onBlur) {
+            this.props.onBlur(ev);
+        }
+    };
+
+    validate({ value, focused }) {
+        if (!this.props.onValidate) {
+            return;
+        }
+        const { valid, feedback } = this.props.onValidate({
+            value,
+            focused,
+        });
+        this.setState({
+            valid,
+            feedback,
+        });
+    }
+
     render() {
         const { element, prefix, onValidate, children, ...inputProps } = this.props;
 
@@ -76,7 +109,9 @@ export default class Field extends React.PureComponent {
         inputProps.type = inputProps.type || "text";
         inputProps.placeholder = inputProps.placeholder || inputProps.label;
 
+        inputProps.onFocus = this.onFocus;
         inputProps.onChange = this.onChange;
+        inputProps.onBlur = this.onBlur;
 
         const fieldInput = React.createElement(inputElement, inputProps, children);
 

src/components/views/elements/Validation.js

@@ -34,8 +34,7 @@ import classNames from 'classnames';
  *     the overall validity and a feedback UI that can be rendered for more detail.
  */
 export default function withValidation({ description, rules }) {
-    return function onValidate(value) {
+    return function onValidate({ value, focused }) {
-        // TODO: Hide on blur
         // TODO: Re-run only after ~200ms of inactivity
         if (!value) {
             return {
@@ -73,6 +72,14 @@ export default function withValidation({ description, rules }) {
             }
         }
 
+        // Hide feedback when not focused
+        if (!focused) {
+            return {
+                valid,
+                feedback: null,
+            };
+        }
+
         let details;
         if (results && results.length) {
             details = <ul className="mx_Validation_details">