diff --git a/common/changes/textfield-IE10issue_2017-02-22-14-34.json b/common/changes/textfield-IE10issue_2017-02-22-14-34.json new file mode 100644 index 00000000000000..8d9c6f8a59c82a --- /dev/null +++ b/common/changes/textfield-IE10issue_2017-02-22-14-34.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "TextField: Fixed IE10 documentation input change behavior", + "type": "patch" + } + ], + "email": "manishda@microsoft.com" +} \ No newline at end of file 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 be72d009a23b2c..ca9f6d2bb3e0bc 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -243,7 +243,7 @@ export class TextField extends BaseComponent i ref={ this._resolveRef('_textElement') } value={ this.state.value } onInput={ this._onInputChange } - onChange={ this._onChange } + onChange={ this._onInputChange } className={ this._textElementClassName } aria-label={ this.props.ariaLabel } aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined } @@ -265,7 +265,7 @@ export class TextField extends BaseComponent i ref={ this._resolveRef('_textElement') } value={ this.state.value } onInput={ this._onInputChange } - onChange={ this._onChange } + onChange={ this._onInputChange } className={ this._textElementClassName } aria-label={ this.props.ariaLabel } aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined } @@ -279,6 +279,9 @@ export class TextField extends BaseComponent i private _onInputChange(event: React.FormEvent): void { const element: HTMLInputElement = event.target as HTMLInputElement; const value: string = element.value; + if (value === this.state.value) { + return; + } this.setState({ value: value, @@ -346,14 +349,4 @@ export class TextField extends BaseComponent i textField.style.height = scrollHeight + 'px'; } } - - private _onChange(): void { - /** - * A noop input change handler. - * https://github.com/facebook/react/issues/7027. - * Using the native onInput handler fixes the issue but onChange - * still need to be wired to avoid React console errors - * TODO: Check if issue is resolved when React 16 is available. - */ - } }