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; }