TextField: Respect validateOnFocus props when props change (#5875)

* Respect validateOnFocusIn/Out props when props change. * Change file.
microsoft · Aug 9, 2018 · c3c818b · c3c818b
1 parent 878c634
commit c3c818b
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/common/changes/office-ui-fabric-react/jg-5813-textfield-validation_2018-08-09-18-29.json b/common/changes/office-ui-fabric-react/jg-5813-textfield-validation_2018-08-09-18-29.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "TextField: Respect validateOnFocus props when props change.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jagore@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx
@@ -148,7 +148,10 @@ export class TextFieldBase extends BaseComponent<ITextFieldProps, ITextFieldStat
         }
       );
 
-      this._delayedValidate(newProps.value);
+      const { validateOnFocusIn, validateOnFocusOut } = newProps;
+      if (!(validateOnFocusIn || validateOnFocusOut)) {
+        this._delayedValidate(newProps.value);
+      }
     }
   }
 

diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
@@ -18,6 +18,10 @@ describe('TextField', () => {
     resetIds();
   });
 
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   function renderIntoDocument(element: React.ReactElement<any>): HTMLElement {
     const component = ReactTestUtils.renderIntoDocument(element);
     const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
@@ -318,13 +322,73 @@ describe('TextField', () => {
         return value.length > 3 ? errorMessage : '';
       }
 
+      jest.useFakeTimers();
+
       const textField = mount(<TextField value="initial value" onGetErrorMessage={validator} />);
 
-      delay(20).then(() => assertErrorMessage(textField.getDOMNode(), errorMessage));
+      jest.runOnlyPendingTimers();
+      assertErrorMessage(textField.getDOMNode(), errorMessage);
 
       textField.setProps({ value: '' });
+      jest.runOnlyPendingTimers();
+
+      assertErrorMessage(textField.getDOMNode(), /* exist */ false);
+    });
+
+    it('should not validate when receiving props when validating only on focus in', () => {
+      let validationCallCount = 0;
+      const validatorSpy = (value: string) => {
+        validationCallCount++;
+        return value.length > 3 ? errorMessage : '';
+      };
+
+      jest.useFakeTimers();
+
+      const textField = mount(
+        <TextField
+          validateOnFocusIn
+          value="initial value"
+          onGetErrorMessage={validatorSpy}
+          validateOnLoad={false}
+          deferredValidationTime={0}
+        />
+      );
+      expect(validationCallCount).toEqual(0);
+      assertErrorMessage(textField.getDOMNode(), false);
+
+      textField.setProps({ value: 'failValidationValue' });
+      jest.runOnlyPendingTimers();
 
-      return delay(250).then(() => assertErrorMessage(textField.getDOMNode(), /* exist */ false));
+      expect(validationCallCount).toEqual(0);
+      assertErrorMessage(textField.getDOMNode(), false);
+    });
+
+    it('should not validate when receiving props when validating only on focus out', () => {
+      let validationCallCount = 0;
+      const validatorSpy = (value: string) => {
+        validationCallCount++;
+        return value.length > 3 ? errorMessage : '';
+      };
+
+      jest.useFakeTimers();
+
+      const textField = mount(
+        <TextField
+          validateOnFocusOut
+          value="initial value"
+          onGetErrorMessage={validatorSpy}
+          validateOnLoad={false}
+          deferredValidationTime={0}
+        />
+      );
+      expect(validationCallCount).toEqual(0);
+      assertErrorMessage(textField.getDOMNode(), false);
+
+      textField.setProps({ value: 'failValidationValue' });
+      jest.runOnlyPendingTimers();
+
+      expect(validationCallCount).toEqual(0);
+      assertErrorMessage(textField.getDOMNode(), false);
     });
 
     it('should trigger validation only on focus', () => {