diff --git a/common/changes/searchbox_fixes_2017-04-24-09-53.json b/common/changes/searchbox_fixes_2017-04-24-09-53.json new file mode 100644 index 00000000000000..7544256b71079e --- /dev/null +++ b/common/changes/searchbox_fixes_2017-04-24-09-53.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Searchbox: IE11 keystroke miss, overflow fix", + "type": "patch" + } + ], + "email": "manishda@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss index 355cb79d975d39..74eff0319c7363 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss @@ -49,7 +49,7 @@ font-size: inherit; color: $ms-color-black; background-color: transparent; - flex-grow: 1; + flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; // This padding forces the text placement to round up. diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx index 3788c9ee3c5fa6..ed602dcc579451 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx @@ -26,6 +26,7 @@ export class SearchBox extends BaseComponent { private _rootElement: HTMLElement; private _inputElement: HTMLInputElement; + private _latestValue: string; public constructor(props: ISearchBoxProps) { super(props); @@ -39,6 +40,7 @@ export class SearchBox extends BaseComponent { public componentWillReceiveProps(newProps: ISearchBoxProps) { if (newProps.value !== undefined) { + this._latestValue = newProps.value; this.setState({ value: newProps.value }); @@ -67,6 +69,7 @@ export class SearchBox extends BaseComponent { className={ css('ms-SearchBox-field', styles.field) } placeholder={ labelText } onChange={ this._onInputChange } + onInput={ this._onInputChange } onKeyDown={ this._onKeyDown } value={ value } ref={ this._resolveRef('_inputElement') } @@ -136,10 +139,14 @@ export class SearchBox extends BaseComponent { @autobind private _onInputChange(ev: React.ChangeEvent) { - this.setState({ - value: this._inputElement.value - }); - this._callOnChange(this._inputElement.value); + const value = this._inputElement.value; + if (value === this._latestValue) { + return; + } + this._latestValue = value; + + this.setState({ value }); + this._callOnChange(value); } private _handleDocumentFocus(ev: FocusEvent) {