fix(autocomplete): tags not generated for preselected options

Signed-off-by: gitdallas <[email protected]>

client/src/app/components/Autocomplete.tsx

@@ -42,21 +42,13 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
 }) => {
   const [inputValue, setInputValue] = useState(searchString);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
-  const [currentChips, setCurrentChips] = useState<Set<string>>(
-    new Set(selections)
-  );
   const [hint, setHint] = useState("");
   const [menuItems, setMenuItems] = useState<React.ReactElement[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
   const menuRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  React.useEffect(() => {
-    onChange([...currentChips]);
-    buildMenu();
-  }, [currentChips]);
-
   React.useEffect(() => {
     buildMenu();
   }, [options]);
@@ -67,7 +59,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
       .filter(
         (item: string, index: number, arr: string[]) =>
           arr.indexOf(item) === index &&
-          !currentChips.has(item) &&
+          !selections.includes(item) &&
           (!inputValue || item.toLowerCase().includes(inputValue.toLowerCase()))
       )
       .map((currentValue, index) => (
@@ -129,9 +121,11 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
 
   /** callback for removing a chip from the chip selections */
   const deleteChip = (chipToDelete: string) => {
-    const newChips = new Set(currentChips);
+    const newChips = new Set(selections);
     newChips.delete(chipToDelete);
-    setCurrentChips(newChips);
+    // newChips.delete(chipToDelete);
+    onChange(Array.from(newChips));
+    // setCurrentChips(newChips);
   };
 
   /** add the given string as a chip in the chip group and clear the input */
@@ -145,7 +139,8 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
       }
       newChipText = matchingOption;
     }
-    setCurrentChips(new Set([...currentChips, newChipText]));
+    // setCurrentChips(new Set([...currentChips, newChipText]));
+    onChange(Array.from(new Set([...selections, newChipText])));
     setInputValue("");
     setMenuIsOpen(false);
   };
@@ -301,7 +296,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
       </FlexItem>
       <FlexItem key="chips">
         <Flex spaceItems={{ default: "spaceItemsXs" }}>
-          {Array.from(currentChips).map((currentChip) => (
+          {selections.map((currentChip) => (
             <FlexItem key={currentChip}>
               <Label color={labelColor} onClose={() => deleteChip(currentChip)}>
                 {currentChip}

client/src/app/pages/applications/components/application-form/application-form.tsx

@@ -445,78 +445,36 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
             name="tags"
             label={t("terms.tags")}
             fieldId="tags"
-            renderInput={({ field: { value, name, onChange } }) => (
-              <Autocomplete
-                noResultsMessage={t("message.noResultsFoundTitle")}
-                onChange={(selections) => {
-                  onChange(
-                    selections
-                      .map((sel) => getTagRef(sel))
-                      .filter((sel) => sel !== undefined) as TagRef[]
-                  );
-                }}
-                options={tagOptions.map((o) => o.value)}
-                placeholderText={t("composed.selectMany", {
-                  what: t("terms.tags").toLowerCase(),
-                })}
-                searchInputAriaLabel="tags-select-toggle"
-                selections={
-                  value
-                    .map(
-                      (formTag) =>
-                        tags?.find((tagRef) => tagRef.name === formTag.name)
-                    )
-                    .map((matchingTag) =>
-                      matchingTag ? matchingTag.name : undefined
-                    )
-                    .filter((e) => e !== undefined) as string[]
-                }
-              />
-              // <SimpleSelect
-              //   maxHeight={DEFAULT_SELECT_MAX_HEIGHT}
-              //   placeholderText={t("composed.selectMany", {
-              //     what: t("terms.tags").toLowerCase(),
-              //   })}
-              //   id="tags-select"
-              //   variant="typeaheadmulti"
-              //   toggleId="tags-select-toggle"
-              //   toggleAriaLabel="tags dropdown toggle"
-              //   aria-label={name}
-              //   value={value
-              //     .map((formTag) =>
-              //       tags?.find((tagRef) => tagRef.name === formTag.name)
-              //     )
-              //     .map((matchingTag) =>
-              //       matchingTag
-              //         ? {
-              //             value: matchingTag.name,
-              //             toString: () => matchingTag.name,
-              //           }
-              //         : undefined
-              //     )
-              //     .filter((e) => e !== undefined)}
-              //   options={tagOptions}
-              // onChange={(selection) => {
-              //   const selectionWithValue = selection.toString();
-
-              //   const currentValue = value || [];
-              //   const e = currentValue.find(
-              //     (f) => f.name === selectionWithValue
-              //   );
-              //   if (e) {
-              //     onChange(
-              //       currentValue.filter((f) => f.name !== selectionWithValue)
-              //     );
-              //   } else {
-              //     const tag = getTagRef(selectionWithValue);
-              //     if (currentValue && typeof tag !== "undefined")
-              //       onChange([...currentValue, tag]);
-              //   }
-              // }}
-              //   onClear={() => onChange([])}
-              //   noResultsFoundText={t("message.noResultsFoundTitle")}
-              // />
-            )}
+            renderInput={({ field: { value, name, onChange } }) => {
+              const selections = value
+                .map(
+                  (formTag) =>
+                    tags?.find((tagRef) => tagRef.name === formTag.name)
+                )
+                .map((matchingTag) =>
+                  matchingTag ? matchingTag.name : undefined
+                )
+                .filter((e) => e !== undefined) as string[];
+
+              return (
+                <Autocomplete
+                  noResultsMessage={t("message.noResultsFoundTitle")}
+                  onChange={(selections) => {
+                    onChange(
+                      selections
+                        .map((sel) => getTagRef(sel))
+                        .filter((sel) => sel !== undefined) as TagRef[]
+                    );
+                  }}
+                  options={tagOptions.map((o) => o.value)}
+                  placeholderText={t("composed.selectMany", {
+                    what: t("terms.tags").toLowerCase(),
+                  })}
+                  searchInputAriaLabel="tags-select-toggle"
+                  selections={selections}
+                />
+              );
+            }}
           />
           <HookFormPFGroupController
             control={control}