From cbe00f233343c857a54663ea16d8bc691e26f422 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Diamond?=
 <32074058+Andre-Diamond@users.noreply.github.com>
Date: Thu, 27 Jun 2024 08:30:45 +0200
Subject: [PATCH] feat: SelectNames component now has ability to receive comma
 separated names

---
 components/SelectNames.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/components/SelectNames.tsx b/components/SelectNames.tsx
index 16dc0c6..82199b0 100644
--- a/components/SelectNames.tsx
+++ b/components/SelectNames.tsx
@@ -10,7 +10,7 @@ interface SelectNamesProps {
 }
 
 const SelectNames: React.FC<SelectNamesProps> = ({ onSelect, initialValue }) => {
-  let initialOptions = initialValue ? initialValue.split(", ").map((val: any) => ({ label: val, value: val })) : [];
+  const initialOptions = initialValue ? initialValue.split(",").map(val => ({ label: val.trim(), value: val.trim() })) : [];
   const [selectedLabels, setSelectedLabels] = React.useState(initialOptions);
   const { myVariable } = useMyVariable();
   const options = myVariable.names ||  [
@@ -20,7 +20,7 @@ const SelectNames: React.FC<SelectNamesProps> = ({ onSelect, initialValue }) =>
   ];
 
   React.useEffect(() => {
-    let initialOptions = initialValue ? initialValue.split(", ").map(val => ({ label: val, value: val })) : [];
+    const initialOptions = initialValue ? initialValue.split(",").map(val => ({ label: val.trim(), value: val.trim() })) : [];
     setSelectedLabels(initialOptions);
   }, [initialValue]);
   
@@ -31,12 +31,24 @@ const SelectNames: React.FC<SelectNamesProps> = ({ onSelect, initialValue }) =>
     onSelect(labs.join(", ")); // Update parent component's state
   }
   
+  const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const pastedText = event.clipboardData.getData('text');
+    const pastedNames = pastedText.split(',').map(name => name.trim()).filter(Boolean);
+    const newOptions = pastedNames.map(name => ({ label: name, value: name }));
+    setSelectedLabels(prevLabels => [...prevLabels, ...newOptions]);
+    handleInputChange([...selectedLabels, ...newOptions]);
+  };
+
   return (
-    <div title="When you type, hit enter to add item and start typing again to add another or select from the dropdown">
+    <div 
+      title="When you type, hit enter to add item and start typing again to add another or select from the dropdown. You can also paste a comma-separated list of names."
+      onPaste={handlePaste}
+    >
        <CreatableSelect
           isMulti
           options={options}
-          value={selectedLabels} // Make it a controlled component
+          value={selectedLabels}
           onChange={(selected) => {
             handleInputChange(selected || []);
           }}
@@ -74,4 +86,4 @@ const SelectNames: React.FC<SelectNamesProps> = ({ onSelect, initialValue }) =>
   );
 };
 
-export default SelectNames;
+export default SelectNames;
\ No newline at end of file