BaseExtendedPicker: Hook up onPaste

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"
+}

packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx

@@ -70,10 +70,13 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> 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<T, P extends IBaseExtendedPickerProps<T>> extend
                 role='combobox'
                 disabled={ disabled }
                 aria-controls='selected-suggestion-alert'
+                onPaste={ this.onPaste }
               />) }
             </div>
           </SelectionZone>
@@ -207,6 +211,15 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     this.selectedItemsList.onCopy(ev);
   }
 
+  @autobind
+  protected onPaste(ev: React.ClipboardEvent<Autofill | HTMLInputElement>): void {
+    if (this.props.onPaste) {
+      let inputText = ev.clipboardData.getData('Text');
+      ev.preventDefault();
+      this.props.onPaste(inputText);
+    }
+  }
+
   @autobind
   protected _isFocusZoneInnerKeystroke(ev: React.KeyboardEvent<HTMLElement>): 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<T, P extends IBaseExtendedPickerProps<T>> 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();

packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx

@@ -49,7 +49,7 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
     const itemId = getId();
     const nativeProps = getNativeProps(this.props, inputProperties);
     return (
-      <div aria-labelledby={ 'editingItemPersona-' + itemId }>
+      <div aria-labelledby={ 'editingItemPersona-' + itemId } className={ 'ms-EditingItem' }>
         <input
           { ...nativeProps}
           ref={ this._resolveInputRef }

packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx

@@ -50,7 +50,7 @@ export class ExtendedSelectedItem extends BaseComponent<ISelectedPeopleItemProps
       >
         <div hidden={ !item.canExpand || onExpandItem === undefined }>
           <IconButton
-            onClick={ this.onClickIconButton(onExpandItem) }
+            onClick={ this._onClickIconButton(onExpandItem) }
             iconProps={ { iconName: 'Add', style: { fontSize: '14px' } } }
             className={ css('ms-PickerItem-removeButton', styles.expandButton, styles.actionButton) }
             ariaLabel={ removeButtonAriaLabel }
@@ -69,7 +69,7 @@ export class ExtendedSelectedItem extends BaseComponent<ISelectedPeopleItemProps
             />
           </div>
           <IconButton
-            onClick={ this.onClickIconButton(onRemoveItem) }
+            onClick={ this._onClickIconButton(onRemoveItem) }
             iconProps={ { iconName: 'Cancel', style: { fontSize: '14px' } } }
             className={ css('ms-PickerItem-removeButton', styles.removeButton, styles.actionButton) }
             ariaLabel={ removeButtonAriaLabel }
@@ -88,8 +88,10 @@ export class ExtendedSelectedItem extends BaseComponent<ISelectedPeopleItemProps
       </div >);
   }
 
-  private onClickIconButton = (action: (() => void) | undefined): () => void => {
-    return (): void => {
+  private _onClickIconButton(action: (() => void) | undefined): (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void {
+    return (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void => {
+      ev.stopPropagation();
+      ev.preventDefault();
       if (action) {
         action();
       }