From 46fdc337fb83d218d299661352e6f7285169b896 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Tue, 17 Apr 2018 17:30:53 -0700 Subject: [PATCH 01/11] added new paramater to callback --- .../src/components/ComboBox/ComboBox.tsx | 18 +++++++++--------- .../src/components/ComboBox/ComboBox.types.ts | 3 ++- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index c4966ce301d3a5..eaf452587ce9e5 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -750,7 +750,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none) { + private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submittedInput?: KeyCodes) { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; @@ -798,7 +798,7 @@ export class ComboBox extends BaseComponent { // Did the creator give us an onChanged callback? if (onChanged) { - onChanged(option, index); + onChanged(option, index, undefined, submittedInput); } // if we have a new selected index, @@ -882,7 +882,7 @@ export class ComboBox extends BaseComponent { /** * Submit a pending value if there is one */ - private _submitPendingValue() { + private _submitPendingValue(submittedInput?: KeyCodes) { const { onChanged, allowFreeform, @@ -914,14 +914,14 @@ export class ComboBox extends BaseComponent { currentPendingValue.length + (this._comboBox.value.selectionEnd - this._comboBox.value.selectionStart) === pendingOptionText.length) || (this._comboBox.value && this._comboBox.value.inputElement && this._comboBox.value.inputElement.value.toLocaleLowerCase() === pendingOptionText) )) { - this._setSelectedIndex(currentPendingValueValidIndex); + this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submittedInput); this._clearPendingInfo(); return; } } if (onChanged) { - onChanged(undefined, undefined, currentPendingValue); + onChanged(undefined, undefined, currentPendingValue, submittedInput); } else { // If we are not controlled, create a new option const newOption: IComboBoxOption = { key: currentPendingValue, text: currentPendingValue }; @@ -940,10 +940,10 @@ export class ComboBox extends BaseComponent { } else if (currentPendingValueValidIndex >= 0) { // Since we are not allowing freeform, we must have a matching // to be able to update state - this._setSelectedIndex(currentPendingValueValidIndex); + this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submittedInput); } else if (currentPendingValueValidIndexOnHover >= 0) { // If all else failed and we were hovering over an item, select it - this._setSelectedIndex(currentPendingValueValidIndexOnHover); + this._setSelectedIndex(currentPendingValueValidIndexOnHover, SearchDirection.none, submittedInput); } // Finally, clear the pending info @@ -1471,7 +1471,7 @@ export class ComboBox extends BaseComponent { switch (ev.which) { case KeyCodes.enter: - this._submitPendingValue(); + this._submitPendingValue(ev.which); if (this.props.multiSelect && isOpen) { this.setState({ currentPendingValueValidIndex: index @@ -1499,7 +1499,7 @@ export class ComboBox extends BaseComponent { case KeyCodes.tab: // On enter submit the pending value if (!this.props.multiSelect) { - this._submitPendingValue(); + this._submitPendingValue(ev.which); } // If we are not allowing freeform diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts index 636e96c4f96fe0..2fae4d1c3dccd5 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts @@ -5,6 +5,7 @@ import { IStyle, ITheme } from '../../Styling'; import { IButtonStyles } from '../../Button'; import { IRenderFunction } from '../../Utilities'; import { IComboBoxClassNames } from './ComboBox.classNames'; +import { KeyCodes } from 'src/index.bundle'; export interface IComboBox { /** @@ -53,7 +54,7 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps * 2) a manually edited value is submitted. In this case there may not be a matched option if allowFreeform is also true * (and hence only value would be true, the other parameter would be null in this case) */ - onChanged?: (option?: IComboBoxOption, index?: number, value?: string) => void; + onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submittedInput?: KeyCodes) => void; /** * Callback issued when the user changes the pending value in ComboBox From d853f6bf31e5ee5c2e36e11734f23afbbc2ddc98 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Tue, 17 Apr 2018 17:35:50 -0700 Subject: [PATCH 02/11] added change file --- ...chiechan-newComboboxCallback_2018-04-18-00-34.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json diff --git a/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json b/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json new file mode 100644 index 00000000000000..f3466b8fe8bebc --- /dev/null +++ b/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ComboBox: Added KeyCode pressed as additional paramater to onChanged callback", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "chiechan@microsoft.com" +} \ No newline at end of file From b3ae60dffebf8976aa548ee9367fc7a28a34ebd2 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Tue, 17 Apr 2018 17:58:21 -0700 Subject: [PATCH 03/11] updated the combobox type import --- .../src/components/ComboBox/ComboBox.types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts index 2fae4d1c3dccd5..588c6eaa6fd2f5 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts @@ -3,9 +3,8 @@ import { ISelectableOption } from '../../utilities/selectableOption/SelectableOp import { ISelectableDroppableTextProps } from '../../utilities/selectableOption/SelectableDroppableText.types'; import { IStyle, ITheme } from '../../Styling'; import { IButtonStyles } from '../../Button'; -import { IRenderFunction } from '../../Utilities'; +import { IRenderFunction, KeyCodes } from '../../Utilities'; import { IComboBoxClassNames } from './ComboBox.classNames'; -import { KeyCodes } from 'src/index.bundle'; export interface IComboBox { /** From 564fdad2ee7056e21d7013efea85e77a437ada76 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 11:43:55 -0700 Subject: [PATCH 04/11] changed callback to include all events instead of just keycode --- .../src/components/ComboBox/ComboBox.tsx | 27 ++++++++++--------- .../src/components/ComboBox/ComboBox.types.ts | 2 +- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index eaf452587ce9e5..719e6eee25d37b 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -32,6 +32,7 @@ import { getClassNames, getComboBoxOptionClassNames } from './ComboBox.classNames'; +import { BaseButton, Button } from 'src/index.bundle'; export interface IComboBoxState { @@ -750,7 +751,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submittedInput?: KeyCodes) { + private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submitPendingValueEvent: React.KeyboardEvent | React.FocusEvent | React.MouseEvent | React.FormEvent) { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; @@ -798,7 +799,7 @@ export class ComboBox extends BaseComponent { // Did the creator give us an onChanged callback? if (onChanged) { - onChanged(option, index, undefined, submittedInput); + onChanged(option, index, undefined, submitPendingValueEvent); } // if we have a new selected index, @@ -874,7 +875,7 @@ export class ComboBox extends BaseComponent { if (this.state.focused) { this.setState({ focused: false }); if (!this.props.multiSelect) { - this._submitPendingValue(); + this._submitPendingValue(event); } } } @@ -882,7 +883,7 @@ export class ComboBox extends BaseComponent { /** * Submit a pending value if there is one */ - private _submitPendingValue(submittedInput?: KeyCodes) { + private _submitPendingValue(submitPendingValueEvent: React.KeyboardEvent | React.FocusEvent) { const { onChanged, allowFreeform, @@ -914,14 +915,14 @@ export class ComboBox extends BaseComponent { currentPendingValue.length + (this._comboBox.value.selectionEnd - this._comboBox.value.selectionStart) === pendingOptionText.length) || (this._comboBox.value && this._comboBox.value.inputElement && this._comboBox.value.inputElement.value.toLocaleLowerCase() === pendingOptionText) )) { - this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submittedInput); + this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submitPendingValueEvent); this._clearPendingInfo(); return; } } if (onChanged) { - onChanged(undefined, undefined, currentPendingValue, submittedInput); + onChanged(undefined, undefined, currentPendingValue, submitPendingValueEvent); } else { // If we are not controlled, create a new option const newOption: IComboBoxOption = { key: currentPendingValue, text: currentPendingValue }; @@ -940,10 +941,10 @@ export class ComboBox extends BaseComponent { } else if (currentPendingValueValidIndex >= 0) { // Since we are not allowing freeform, we must have a matching // to be able to update state - this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submittedInput); + this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submitPendingValueEvent); } else if (currentPendingValueValidIndexOnHover >= 0) { // If all else failed and we were hovering over an item, select it - this._setSelectedIndex(currentPendingValueValidIndexOnHover, SearchDirection.none, submittedInput); + this._setSelectedIndex(currentPendingValueValidIndexOnHover, SearchDirection.none, submitPendingValueEvent); } // Finally, clear the pending info @@ -1241,9 +1242,9 @@ export class ComboBox extends BaseComponent { * to select the item and also close the menu * @param index - the index of the item that was clicked */ - private _onItemClick(index: number | undefined): () => void { - return (): void => { - this._setSelectedIndex(index as number); + private _onItemClick(index: number | undefined): (ev: React.MouseEvent | React.FormEvent) => void { + return (ev: React.MouseEvent | React.FormEvent): void => { + this._setSelectedIndex(index as number, undefined, ev); if (!this.props.multiSelect) { // only close the callout when it's in single-select mode this.setState({ @@ -1471,7 +1472,7 @@ export class ComboBox extends BaseComponent { switch (ev.which) { case KeyCodes.enter: - this._submitPendingValue(ev.which); + this._submitPendingValue(ev); if (this.props.multiSelect && isOpen) { this.setState({ currentPendingValueValidIndex: index @@ -1499,7 +1500,7 @@ export class ComboBox extends BaseComponent { case KeyCodes.tab: // On enter submit the pending value if (!this.props.multiSelect) { - this._submitPendingValue(ev.which); + this._submitPendingValue(ev); } // If we are not allowing freeform diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts index 588c6eaa6fd2f5..e6dacf9ad0d8bf 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts @@ -53,7 +53,7 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps * 2) a manually edited value is submitted. In this case there may not be a matched option if allowFreeform is also true * (and hence only value would be true, the other parameter would be null in this case) */ - onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submittedInput?: KeyCodes) => void; + onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: React.KeyboardEvent | React.FocusEvent | React.MouseEvent | React.FormEvent) => void; /** * Callback issued when the user changes the pending value in ComboBox From d5f18be120525b1a1c8c4fe410f2cf7b3f4564bb Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 13:36:47 -0700 Subject: [PATCH 05/11] made events more generic so user can parse it themselves --- .../src/components/ComboBox/ComboBox.tsx | 6 +++--- .../src/components/ComboBox/ComboBox.types.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 719e6eee25d37b..c7321d41af4dc8 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -751,7 +751,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submitPendingValueEvent: React.KeyboardEvent | React.FocusEvent | React.MouseEvent | React.FormEvent) { + private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submitPendingValueEvent: any) { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; @@ -883,7 +883,7 @@ export class ComboBox extends BaseComponent { /** * Submit a pending value if there is one */ - private _submitPendingValue(submitPendingValueEvent: React.KeyboardEvent | React.FocusEvent) { + private _submitPendingValue(submitPendingValueEvent: any) { const { onChanged, allowFreeform, @@ -1242,7 +1242,7 @@ export class ComboBox extends BaseComponent { * to select the item and also close the menu * @param index - the index of the item that was clicked */ - private _onItemClick(index: number | undefined): (ev: React.MouseEvent | React.FormEvent) => void { + private _onItemClick(index: number | undefined): (ev: any) => void { return (ev: React.MouseEvent | React.FormEvent): void => { this._setSelectedIndex(index as number, undefined, ev); if (!this.props.multiSelect) { diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts index e6dacf9ad0d8bf..c01265054ac39c 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts @@ -53,7 +53,7 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps * 2) a manually edited value is submitted. In this case there may not be a matched option if allowFreeform is also true * (and hence only value would be true, the other parameter would be null in this case) */ - onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: React.KeyboardEvent | React.FocusEvent | React.MouseEvent | React.FormEvent) => void; + onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any) => void; /** * Callback issued when the user changes the pending value in ComboBox From fc51d4b5851038b699e24d040e46e77ec73d843a Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 13:49:33 -0700 Subject: [PATCH 06/11] made event optional --- .../office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index c7321d41af4dc8..dfd3ed6b60d35e 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -751,7 +751,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submitPendingValueEvent: any) { + private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submitPendingValueEvent?: any) { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; From d6d02e91500476feb23f275c8fb3973aabf132c9 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 15:01:54 -0700 Subject: [PATCH 07/11] re-arranged function call and added more any events --- .../src/components/ComboBox/ComboBox.tsx | 12 ++++++------ .../src/components/ComboBox/ComboBox.types.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 69e56ce2390bc2..e2d6ee622e878c 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -751,7 +751,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none, submitPendingValueEvent?: any) { + private _setSelectedIndex(index: number, submitPendingValueEvent: Event, searchDirection: SearchDirection = SearchDirection.none) { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; @@ -915,7 +915,7 @@ export class ComboBox extends BaseComponent { currentPendingValue.length + (this._autofill.value.selectionEnd! - this._autofill.value.selectionStart!) === pendingOptionText.length) || (this._autofill.value && this._autofill.value.inputElement && this._autofill.value.inputElement.value.toLocaleLowerCase() === pendingOptionText) )) { - this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submitPendingValueEvent); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent, SearchDirection.none); this._clearPendingInfo(); return; } @@ -941,10 +941,10 @@ export class ComboBox extends BaseComponent { } else if (currentPendingValueValidIndex >= 0) { // Since we are not allowing freeform, we must have a matching // to be able to update state - this._setSelectedIndex(currentPendingValueValidIndex, SearchDirection.none, submitPendingValueEvent); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent, SearchDirection.none); } else if (currentPendingValueValidIndexOnHover >= 0) { // If all else failed and we were hovering over an item, select it - this._setSelectedIndex(currentPendingValueValidIndexOnHover, SearchDirection.none, submitPendingValueEvent); + this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent, SearchDirection.none); } // Finally, clear the pending info @@ -1243,8 +1243,8 @@ export class ComboBox extends BaseComponent { * @param index - the index of the item that was clicked */ private _onItemClick(index: number | undefined): (ev: any) => void { - return (ev: React.MouseEvent | React.FormEvent): void => { - this._setSelectedIndex(index as number, undefined, ev); + return (ev: any): void => { + this._setSelectedIndex(index as number, ev); if (!this.props.multiSelect) { // only close the callout when it's in single-select mode this.setState({ diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts index c01265054ac39c..af659255ea9afa 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts @@ -3,7 +3,7 @@ import { ISelectableOption } from '../../utilities/selectableOption/SelectableOp import { ISelectableDroppableTextProps } from '../../utilities/selectableOption/SelectableDroppableText.types'; import { IStyle, ITheme } from '../../Styling'; import { IButtonStyles } from '../../Button'; -import { IRenderFunction, KeyCodes } from '../../Utilities'; +import { IRenderFunction } from '../../Utilities'; import { IComboBoxClassNames } from './ComboBox.classNames'; export interface IComboBox { From 836b00a697e2afa894c18e7c937c9faa18b9693b Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 15:04:15 -0700 Subject: [PATCH 08/11] removed unneeded parameter added --- .../src/components/ComboBox/ComboBox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index e2d6ee622e878c..84ef4382166b5a 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -915,7 +915,7 @@ export class ComboBox extends BaseComponent { currentPendingValue.length + (this._autofill.value.selectionEnd! - this._autofill.value.selectionStart!) === pendingOptionText.length) || (this._autofill.value && this._autofill.value.inputElement && this._autofill.value.inputElement.value.toLocaleLowerCase() === pendingOptionText) )) { - this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent, SearchDirection.none); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent); this._clearPendingInfo(); return; } @@ -941,10 +941,10 @@ export class ComboBox extends BaseComponent { } else if (currentPendingValueValidIndex >= 0) { // Since we are not allowing freeform, we must have a matching // to be able to update state - this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent, SearchDirection.none); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent); } else if (currentPendingValueValidIndexOnHover >= 0) { // If all else failed and we were hovering over an item, select it - this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent, SearchDirection.none); + this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent); } // Finally, clear the pending info From b3551c703bad4bc8321a7e81143ef42dd24317c4 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 17:53:11 -0700 Subject: [PATCH 09/11] updated change file --- .../chiechan-newComboboxCallback_2018-04-18-00-34.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json b/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json index f3466b8fe8bebc..367179e263714a 100644 --- a/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json +++ b/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json @@ -2,7 +2,7 @@ "changes": [ { "packageName": "office-ui-fabric-react", - "comment": "ComboBox: Added KeyCode pressed as additional paramater to onChanged callback", + "comment": "ComboBox: Add Event as additional paramater to onChanged callback for saving pending changes", "type": "minor" } ], From f322efa82e6db849e31600b9a96e25a42b7967c9 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 17:54:38 -0700 Subject: [PATCH 10/11] fixed type --- .../office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 84ef4382166b5a..5f822f9a52c9d7 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -883,7 +883,7 @@ export class ComboBox extends BaseComponent { /** * Submit a pending value if there is one */ - private _submitPendingValue(submitPendingValueEvent: any) { + private _submitPendingValue(submitPendingValueEvent: Event) { const { onChanged, allowFreeform, From 55b0465fa366cebbd7a0e4501ac14b93ce80f34a Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 18 Apr 2018 21:26:34 -0700 Subject: [PATCH 11/11] changed event to any to prevent crashes --- .../src/components/ComboBox/ComboBox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 5f822f9a52c9d7..ab95cbf3e749c4 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -751,7 +751,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, submitPendingValueEvent: Event, searchDirection: SearchDirection = SearchDirection.none) { + private _setSelectedIndex(index: number, submitPendingValueEvent: any, searchDirection: SearchDirection = SearchDirection.none) { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; @@ -883,7 +883,7 @@ export class ComboBox extends BaseComponent { /** * Submit a pending value if there is one */ - private _submitPendingValue(submitPendingValueEvent: Event) { + private _submitPendingValue(submitPendingValueEvent: any) { const { onChanged, allowFreeform, @@ -944,7 +944,7 @@ export class ComboBox extends BaseComponent { this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent); } else if (currentPendingValueValidIndexOnHover >= 0) { // If all else failed and we were hovering over an item, select it - this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent); + this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent, ); } // Finally, clear the pending info