From b949fafc76fcca79805c0cf0ccf6fa9d5dcd231c Mon Sep 17 00:00:00 2001
From: jubitjohn <jubitjohn1@gmail.com>
Date: Mon, 3 Jul 2023 11:46:51 +0530
Subject: [PATCH] Added multiple select option

---
 .../ShareControl/ManageAddCollabOptions.tsx   | 12 ---
 .../components/SingleInputAutocomplete.tsx    | 79 ++++++++++---------
 2 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageAddCollabOptions.tsx b/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageAddCollabOptions.tsx
index 32aebf147..e25eea92c 100644
--- a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageAddCollabOptions.tsx
+++ b/apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageAddCollabOptions.tsx
@@ -59,18 +59,6 @@ export default function ManageAddCollabOptions({
                             icon={<WorkspacesIcon />}
                         />
                         <EmailShare collection={collection} />
-                        {/* <Stack spacing={3}></Stack> */}
-                        {/* {sharableLinkError && (
-                            <Typography
-                                textAlign={'center'}
-                                variant="small"
-                                sx={{
-                                    color: (theme) => theme.colors.danger.A700,
-                                    mt: 0.5,
-                                }}>
-                                {sharableLinkError}
-                            </Typography>
-                        )} */}
                     </Stack>
                 </Stack>
             </EnteDrawer>
diff --git a/apps/photos/src/components/SingleInputAutocomplete.tsx b/apps/photos/src/components/SingleInputAutocomplete.tsx
index 83fe4ce7e..d0371c492 100644
--- a/apps/photos/src/components/SingleInputAutocomplete.tsx
+++ b/apps/photos/src/components/SingleInputAutocomplete.tsx
@@ -6,12 +6,12 @@ import TextField from '@mui/material/TextField';
 import { FlexWrapper } from './Container';
 import { Button, FormHelperText, Stack } from '@mui/material';
 import { t } from 'i18next';
-import Autocomplete from '@mui/material/Autocomplete';
 import { MenuItemGroup } from './Menu/MenuItemGroup';
 import { EnteMenuItem } from './Menu/EnteMenuItem';
 import MenuItemDivider from './Menu/MenuItemDivider';
 import MenuSectionTitle from './Menu/MenuSectionTitle';
 import AvatarCollectionShare from './Collections/CollectionShare/AvatarCollectionShare';
+import DoneIcon from '@mui/icons-material/Done';
 
 interface formValues {
     inputValue: string;
@@ -42,7 +42,6 @@ export default function SingleInputAutocomplete(
     props: SingleInputAutocompleteProps
 ) {
     const [selectedOptions, setSelectedOptions] = useState([]);
-
     const { submitButtonProps } = props;
     const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};
 
@@ -60,8 +59,14 @@ export default function SingleInputAutocomplete(
         );
 
         if (props.optionsList && props.optionsList.length > 0) {
-            setSelectedOptions([...selectedOptions, values.inputValue]);
+            const updatedSelectedOptions = selectedOptions.includes(
+                values.inputValue
+            )
+                ? selectedOptions.filter((item) => item !== values.inputValue)
+                : [...selectedOptions, values.inputValue];
+            setSelectedOptions(updatedSelectedOptions);
         }
+        console.log('Final list:', selectedOptions);
 
         SetLoading(false);
     };
@@ -81,6 +86,15 @@ export default function SingleInputAutocomplete(
         }
     }, [props.fieldType]);
 
+    const handleEmailClick = (email: string, setFieldValue) => {
+        setFieldValue('inputValue', email);
+        const updatedSelectedOptions = selectedOptions.includes(email)
+            ? selectedOptions.filter((item) => item !== email)
+            : [...selectedOptions, email];
+        setSelectedOptions(updatedSelectedOptions);
+        console.log(selectedOptions);
+    };
+
     return (
         <Formik<formValues>
             initialValues={{ inputValue: props.initialValue ?? '' }}
@@ -98,40 +112,24 @@ export default function SingleInputAutocomplete(
                 <form noValidate onSubmit={handleSubmit}>
                     {props.hiddenPreInput}
 
-                    <Autocomplete
-                        id="free-solo-demo"
-                        filterSelectedOptions
-                        freeSolo
+                    <TextField
+                        hiddenLabel={props.hiddenLabel}
+                        fullWidth
+                        type={props.fieldType}
+                        id={props.fieldType}
+                        onChange={handleChange('inputValue')}
+                        name={props.fieldType}
+                        {...(props.hiddenLabel
+                            ? { placeholder: props.placeholder }
+                            : { label: props.placeholder })}
+                        error={Boolean(errors.inputValue)}
+                        helperText={errors.inputValue}
                         value={values.inputValue}
-                        options={props.optionsList
-                            .map((option) => option.toString())
-                            .filter(
-                                (option) => !selectedOptions.includes(option)
-                            )}
-                        onChange={(event, newValue) => {
-                            setFieldValue('inputValue', newValue);
-                        }}
-                        renderInput={(params) => (
-                            <TextField
-                                {...params}
-                                hiddenLabel={props.hiddenLabel}
-                                fullWidth
-                                type={props.fieldType}
-                                id={props.fieldType}
-                                onChange={handleChange('inputValue')}
-                                name={props.fieldType}
-                                {...(props.hiddenLabel
-                                    ? { placeholder: props.placeholder }
-                                    : { label: props.placeholder })}
-                                error={Boolean(errors.inputValue)}
-                                helperText={errors.inputValue}
-                                value={values.inputValue}
-                                disabled={loading}
-                                autoFocus={!props.disableAutoFocus}
-                                autoComplete={props.autoComplete}
-                            />
-                        )}
+                        disabled={loading}
+                        autoFocus={!props.disableAutoFocus}
+                        autoComplete={props.autoComplete}
                     />
+
                     <Stack py={'10px'} px={'8px'}>
                         {' '}
                     </Stack>
@@ -144,13 +142,18 @@ export default function SingleInputAutocomplete(
                                     //
                                     fontWeight="normal"
                                     key={item}
-                                    onClick={() => {
-                                        setFieldValue('inputValue', item);
-                                    }}
+                                    onClick={() =>
+                                        handleEmailClick(item, setFieldValue)
+                                    }
                                     label={item}
                                     startIcon={
                                         <AvatarCollectionShare email={item} />
                                     }
+                                    endIcon={
+                                        selectedOptions.includes(item) ? (
+                                            <DoneIcon />
+                                        ) : null
+                                    }
                                 />
                                 {index !== props.optionsList.length - 1 && (
                                     <MenuItemDivider />