Merge pull request #3740 from matrix-org/t3chguy/field_validation_async_tooltip_sticks

Fix Field validation tooltip sticking if blurred before async validation resolved

src/components/views/elements/Field.js

@@ -66,10 +66,14 @@ export default class Field extends React.PureComponent {
         this.state = {
             valid: undefined,
             feedback: undefined,
+            focused: false,
         };
     }
 
     onFocus = (ev) => {
+        this.setState({
+            focused: true,
+        });
         this.validate({
             focused: true,
         });
@@ -88,6 +92,9 @@ export default class Field extends React.PureComponent {
     };
 
     onBlur = (ev) => {
+        this.setState({
+            focused: false,
+        });
         this.validate({
             focused: false,
         });
@@ -112,7 +119,9 @@ export default class Field extends React.PureComponent {
             allowEmpty,
         });
 
-        if (feedback) {
+        // this method is async and so we may have been blurred since the method was called
+        // if we have then hide the feedback as withValidation does
+        if (this.state.focused && feedback) {
             this.setState({
                 valid,
                 feedback,