diff --git a/common/changes/office-ui-fabric-react/bugfix-Fix-validate-function-works-with-validateOnFocusOut_2018-02-11-17-19.json b/common/changes/office-ui-fabric-react/bugfix-Fix-validate-function-works-with-validateOnFocusOut_2018-02-11-17-19.json
new file mode 100644
index 00000000000000..c57cdd8fedaefd
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/bugfix-Fix-validate-function-works-with-validateOnFocusOut_2018-02-11-17-19.json
@@ -0,0 +1,11 @@
+{
+ "changes": [
+ {
+ "packageName": "office-ui-fabric-react",
+ "comment": "Fix bug: '#3940 Validate function works incorrect with attribute validateOnFocusOut'",
+ "type": "patch"
+ }
+ ],
+ "packageName": "office-ui-fabric-react",
+ "email": "ia.samoylov@icloud.com"
+}
\ No newline at end of file
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
index cca8acb4468347..04f715640aaf02 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
@@ -84,7 +84,7 @@ describe('TextField', () => {
const renderedDOM: HTMLElement = renderIntoDocument(
);
@@ -287,6 +287,11 @@ describe('TextField', () => {
ReactTestUtils.Simulate.focus(inputDOM);
expect(validationCallCount).toEqual(2);
+
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input '));
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input value'));
+ ReactTestUtils.Simulate.focus(inputDOM);
+ expect(validationCallCount).toEqual(3);
});
it('should trigger validation only on blur', () => {
@@ -305,12 +310,17 @@ describe('TextField', () => {
);
const inputDOM: HTMLInputElement = renderedDOM.getElementsByTagName('input')[0];
- ReactTestUtils.Simulate.focus(inputDOM);
ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input value'));
expect(validationCallCount).toEqual(1);
ReactTestUtils.Simulate.blur(inputDOM);
expect(validationCallCount).toEqual(2);
+
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input va'));
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input value'));
+
+ ReactTestUtils.Simulate.blur(inputDOM);
+ expect(validationCallCount).toEqual(3);
});
it('should trigger validation on both blur and focus', () => {
@@ -335,9 +345,20 @@ describe('TextField', () => {
ReactTestUtils.Simulate.focus(inputDOM);
expect(validationCallCount).toEqual(2);
+
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before foc'));
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before focus'));
+ ReactTestUtils.Simulate.focus(inputDOM);
+ expect(validationCallCount).toEqual(3);
+
ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before blur'));
ReactTestUtils.Simulate.blur(inputDOM);
- expect(validationCallCount).toEqual(3);
+ expect(validationCallCount).toEqual(4);
+
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before bl'));
+ ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before blur'));
+ ReactTestUtils.Simulate.blur(inputDOM);
+ expect(validationCallCount).toEqual(5);
});
it('should not trigger validation on component mount', () => {
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index bb711fbd70f7ee..06e63901eedc93 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
@@ -418,8 +418,10 @@ export class TextField extends BaseComponent i
}
private _validate(value: string | undefined): void {
+ const { validateOnFocusIn, validateOnFocusOut } = this.props;
+
// In case of _validate called multi-times during executing validate logic with promise return.
- if (this._latestValidateValue === value) {
+ if (this._latestValidateValue === value && !(validateOnFocusIn || validateOnFocusOut)) {
return;
}