[Do not review] Enabling selection for input changed for UnifiedPicker and updating example for that case

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

@@ -26,7 +26,7 @@ export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.
 
   const rootRef = React.createRef<HTMLDivElement>();
   const input = React.useRef<Autofill>(null);
-  const { setQueryString } = useQueryString('');
+  const { setQueryString, clearQueryString } = useQueryString('');
   const [selection, setSelection] = React.useState(new Selection({ onSelectionChanged: () => _onSelectionChanged() }));
   const [focusedItemIndices, setFocusedItemIndices] = React.useState(selection.getSelectedIndices() || []);
   const { suggestions, selectedSuggestionIndex, isSuggestionsVisible } = props.floatingSuggestionProps;
@@ -270,12 +270,25 @@ export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.
       props.inputProps.onClick(ev as React.MouseEvent<HTMLInputElement>);
     }
   };
-  const _onInputChange = (value: string, composing?: boolean) => {
+  const _onInputChange = (value: string, composing?: boolean, resultItemsList?: T[]) => {
     if (!composing) {
       // update query string
       setQueryString(value);
       !isSuggestionsShown ? showPicker(true) : null;
-      onInputChange ? onInputChange(value) : null;
+      if (!resultItemsList) {
+        resultItemsList = [];
+      }
+      if (onInputChange) {
+        onInputChange(value, composing, resultItemsList);
+        clearQueryString();
+        if (resultItemsList && resultItemsList.length > 0) {
+          addItems(resultItemsList);
+          showPicker(false);
+          if (input.current) {
+            input.current._updateValue('', composing);
+          }
+        }
+      }
     }
   };
   const _onPaste = (ev: React.ClipboardEvent<Autofill | HTMLInputElement>) => {

packages/experiments/src/components/UnifiedPicker/UnifiedPicker.types.ts

@@ -81,7 +81,7 @@ export interface IUnifiedPickerProps<T> {
   /**
    * On input value change
    */
-  onInputChange?: (filter: string) => void;
+  onInputChange?: (filter: string, composing?: boolean, resultItemsList?: T[]) => void;
 
   /**
    * Drag drop events callback interface

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

@@ -58,6 +58,8 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
     ..._suggestions,
   ]);
 
+  const ref = React.useRef<any>();
+
   const [peopleSelectedItems, setPeopleSelectedItems] = React.useState<IPersonaProps[]>([]);
 
   const _onSuggestionSelected = (
@@ -102,26 +104,6 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
     return copyText;
   };
 
-  const _onPaste = (pastedValue: string, selectedItemsList: IPersonaProps[]): void => {
-    // Find the suggestion corresponding to the specific text name
-    // and update the selectedItemsList to re-render everything.
-    const newList: IPersonaProps[] = [];
-    if (pastedValue !== null) {
-      pastedValue.split(',').forEach(textValue => {
-        if (textValue) {
-          people.forEach(suggestionItem => {
-            if (suggestionItem.text === textValue) {
-              selectedItemsList.push(suggestionItem);
-              newList.push(suggestionItem);
-            }
-          });
-        }
-      });
-    }
-
-    setPeopleSelectedItems(prevPeopleSelectedItems => [...prevPeopleSelectedItems, ...newList]);
-  };
-
   const _serializeItemsForDrag = (items: IPersonaProps[]): string => {
     return _getItemsCopyText(items);
   };
@@ -179,14 +161,54 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
     setPeopleSelectedItems(updatedItems);
   };
 
-  const _onInputChange = (filterText: string): void => {
+  const SEPARATOR_REGEX = new RegExp(';|,|\\n|\u000A', 'g');
+  const splitPasteInputIntoRecipientStrings = (inputText: string) =>
+    inputText
+      .split(SEPARATOR_REGEX)
+      .map((token: string) => token.trim())
+      .filter((token: string) => !!token);
+
+  const _onInputChange = (filterText: string, composing?: boolean, resultItemsList?: IPersonaProps[]): void => {
     const allPeople = people;
+
+    const lastCharIndex = filterText.length - 1;
+    const lastChar = filterText[lastCharIndex];
     const suggestions = allPeople.filter((item: IPersonaProps) => _startsWith(item.text || '', filterText));
     const suggestionList = suggestions.map(item => {
       return { item: item, isSelected: false, key: item.key } as IFloatingSuggestionItem<IPersonaProps>;
     });
-    // We want to show top 5 results
-    setPeopleSuggestions(suggestionList.splice(0, 5));
+
+    const updatedItems: IPersonaProps[] = [];
+    const currentItems: IPersonaProps[] = [...peopleSelectedItems];
+
+    for (let i = 0; i < currentItems.length; i++) {
+      const item = currentItems[i];
+      updatedItems.push(item);
+    }
+
+    if (lastChar == ';' || lastChar == ',') {
+      const pastedText = splitPasteInputIntoRecipientStrings(filterText);
+      pastedText.forEach(function(itemText) {
+        let result;
+        const extractedText = itemText.substring(0, lastCharIndex);
+        // We need to do an exact match
+
+        allPeople.forEach((item: IPersonaProps) => {
+          if (item.text.toLowerCase() == extractedText.toLowerCase()) {
+            result = item;
+          }
+        });
+
+        if (result && resultItemsList) {
+          resultItemsList.push(result);
+          updatedItems.push(result);
+        }
+        setPeopleSelectedItems(updatedItems);
+      });
+    } else {
+      // We want to show top 5 results
+      setPeopleSuggestions(suggestionList.splice(0, 5));
+    }
   };
 
   function _startsWith(text: string, filterText: string): boolean {
@@ -222,13 +244,12 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
   return (
     <>
       <UnifiedPeoplePicker
+        componentRef={ref}
         selectedItemsListProps={selectedPeopleListProps}
         floatingSuggestionProps={floatingPeoplePickerProps}
         inputProps={inputProps}
         // eslint-disable-next-line react/jsx-no-bind
         onInputChange={_onInputChange}
-        // eslint-disable-next-line react/jsx-no-bind
-        onPaste={_onPaste}
         customClipboardType="recipients"
       />
     </>