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..367179e263714a --- /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: Add Event as additional paramater to onChanged callback for saving pending changes", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "chiechan@microsoft.com" +} \ No newline at end of file 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 a7986b1c5657d0..ab95cbf3e749c4 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) { + private _setSelectedIndex(index: number, submitPendingValueEvent: any, searchDirection: SearchDirection = SearchDirection.none) { 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); + 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() { + private _submitPendingValue(submitPendingValueEvent: any) { const { onChanged, allowFreeform, @@ -914,14 +915,14 @@ 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); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent); this._clearPendingInfo(); return; } } if (onChanged) { - onChanged(undefined, undefined, currentPendingValue); + 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); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent); } else if (currentPendingValueValidIndexOnHover >= 0) { // If all else failed and we were hovering over an item, select it - this._setSelectedIndex(currentPendingValueValidIndexOnHover); + this._setSelectedIndex(currentPendingValueValidIndexOnHover, 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: any) => void { + 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({ @@ -1471,7 +1472,7 @@ export class ComboBox extends BaseComponent { switch (ev.which) { case KeyCodes.enter: - this._submitPendingValue(); + 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(); + 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 636e96c4f96fe0..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 @@ -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) => void; + onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any) => void; /** * Callback issued when the user changes the pending value in ComboBox