diff --git a/common/changes/@uifabric/experiments/amyngu-paste_2018-02-05-22-57.json b/common/changes/@uifabric/experiments/amyngu-paste_2018-02-05-22-57.json new file mode 100644 index 00000000000000..9e77194bb2d3b1 --- /dev/null +++ b/common/changes/@uifabric/experiments/amyngu-paste_2018-02-05-22-57.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Hook up onPaste for BaseExtendedPicker", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "amyngu@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx index a814d81153d811..fda64e3fdbe456 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -70,10 +70,13 @@ export class BaseExtendedPicker> extend } public focus(): void { - console.log('extended picker focus'); this.focusZone.focus(); } + public get inputElement(): HTMLInputElement { + return this.input.inputElement; + } + public render(): JSX.Element { let { suggestedDisplayValue } = this.state; let { @@ -116,6 +119,7 @@ export class BaseExtendedPicker> extend role='combobox' disabled={ disabled } aria-controls='selected-suggestion-alert' + onPaste={ this.onPaste } />) } @@ -207,6 +211,15 @@ export class BaseExtendedPicker> extend this.selectedItemsList.onCopy(ev); } + @autobind + protected onPaste(ev: React.ClipboardEvent): void { + if (this.props.onPaste) { + let inputText = ev.clipboardData.getData('Text'); + ev.preventDefault(); + this.props.onPaste(inputText); + } + } + @autobind protected _isFocusZoneInnerKeystroke(ev: React.KeyboardEvent): boolean { // If suggestions are shown let up/down keys control them, otherwise allow them through to control the focusZone. @@ -229,6 +242,9 @@ export class BaseExtendedPicker> extend @autobind protected _onSuggestionSelected(item: T): void { this.selectedItemsList.addItems([item]); + if (this.props.onItemSelected) { + this.props.onItemSelected(item); + } this.input.clear(); this.floatingPicker.hidePicker(); diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index 17d6bb7b455028..6678b842fa3bda 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -49,7 +49,7 @@ export class EditingItem extends BaseComponent +
); } - private onClickIconButton = (action: (() => void) | undefined): () => void => { - return (): void => { + private _onClickIconButton(action: (() => void) | undefined): (ev: React.MouseEvent) => void { + return (ev: React.MouseEvent): void => { + ev.stopPropagation(); + ev.preventDefault(); if (action) { action(); }