basic drop over input, still bugs

packages/examples/src/experiments/UnifiedPeoplePicker/DoubleUnifiedPeoplePicker.Example.tsx

@@ -162,6 +162,11 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
           updatedItems.push(item);
         }
       }
+      if (insertIndex === currentItems.length) {
+        newItems.forEach(draggedItem => {
+          updatedItems.push(draggedItem);
+        });
+      }
       setPeopleSelectedItems(updatedItems);
     }
   };

packages/examples/src/experiments/UnifiedPeoplePicker/UnifiedPeoplePicker.Example.tsx

@@ -143,6 +143,11 @@ export const UnifiedPeoplePickerExample = (): JSX.Element => {
           updatedItems.push(item);
         }
       }
+      if (insertIndex === currentItems.length) {
+        newItems.forEach(draggedItem => {
+          updatedItems.push(draggedItem);
+        });
+      }
       setPeopleSelectedItems(updatedItems);
     }
   };

packages/examples/src/experiments/UnifiedPeoplePicker/UnifiedPeoplePicker.WithEdit.Example.tsx

@@ -173,6 +173,11 @@ export const UnifiedPeoplePickerWithEditExample = (): JSX.Element => {
           updatedItems.push(item);
         }
       }
+      if (insertIndex === currentItems.length) {
+        newItems.forEach(draggedItem => {
+          updatedItems.push(draggedItem);
+        });
+      }
       setPeopleSelectedItems(updatedItems);
     }
   };

packages/experiments/src/components/UnifiedPicker/UnifiedPicker.tsx

@@ -118,8 +118,17 @@ export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.
     return !focusedItemIndices.includes(dropContext!.index);
   };
 
-  const _onDrop = (item?: any, event?: DragEvent): void => {
+  const _onDropAutoFill = (event?: DragEvent) => {
+    insertIndex = selectedItems.length;
+    _onDropInner(event);
+  };
+
+  const _onDropList = (item?: any, event?: DragEvent): void => {
     insertIndex = selectedItems.indexOf(item);
+    _onDropInner(event);
+  };
+
+  const _onDropInner = (event?: DragEvent): void => {
     let isDropHandled = false;
     if (event?.dataTransfer) {
       event.preventDefault();
@@ -175,12 +184,16 @@ export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.
     setDraggedIndex(-1);
   };
 
+  const _onDragOver = (event?: React.DragEvent<HTMLDivElement>) => {
+    event?.preventDefault();
+  };
+
   const defaultDragDropEvents: IDragDropEvents = {
     canDrop: _canDrop,
     canDrag: () => true,
     onDragEnter: _onDragEnter,
     onDragLeave: () => undefined,
-    onDrop: _onDrop,
+    onDrop: _onDropList,
     onDragStart: _onDragStart,
     onDragEnd: _onDragEnd,
   };
@@ -364,6 +377,8 @@ export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.
                   aria-haspopup="listbox"
                   role="combobox"
                   className={css('ms-BasePicker-div', classNames.pickerDiv)}
+                  onDrop={_onDropAutoFill}
+                  onDragOver={_onDragOver}
                 >
                   <Autofill
                     {...(inputProps as IInputProps)}

packages/experiments/src/components/UnifiedPicker/hooks/useSelectedItems.ts

@@ -49,6 +49,12 @@ export const useSelectedItems = <T extends {}>(
         updatedItems.push(item);
       }
     }
+    // if the insert index is at the end, add them now
+    if (insertIndex === currentItems.length) {
+      itemsToAdd.forEach(draggedItem => {
+        updatedItems.push(draggedItem);
+      });
+    }
     setSelectedItems(updatedItems);
     selection.setItems(updatedItems);
   };