diff --git a/client/src/app/components/Autocomplete.tsx b/client/src/app/components/Autocomplete.tsx index d507771cc9..3c45d3c57f 100644 --- a/client/src/app/components/Autocomplete.tsx +++ b/client/src/app/components/Autocomplete.tsx @@ -119,33 +119,32 @@ export const Autocomplete: React.FC = ({ buildMenu(); }; - /** callback for removing a chip from the chip selections */ - const deleteChip = (chipToDelete: string) => { - const newChips = new Set(selections); - newChips.delete(chipToDelete); - onChange(Array.from(newChips)); + /** callback for removing a selection */ + const deleteSelection = (selectionToDelete: string) => { + onChange(selections.filter((s) => s !== selectionToDelete)); }; - /** add the given string as a chip in the chip group and clear the input */ - const addChip = (newChipText: string) => { + /** add the given string as a selection */ + const addSelection = (newSelectionText: string) => { if (!allowUserOptions) { const matchingOption = options.find( - (o) => o.toLowerCase() === (hint || newChipText).toLowerCase() + (o) => o.toLowerCase() === (hint || newSelectionText).toLowerCase() ); - if (!matchingOption) { + console.log({ matchingOption, newSelectionText, options }); + if (!matchingOption || selections.includes(matchingOption)) { return; } - newChipText = matchingOption; + newSelectionText = matchingOption; } - onChange(Array.from(new Set([...selections, newChipText]))); + onChange([...selections, newSelectionText]); setInputValue(""); setMenuIsOpen(false); }; - /** add the current input value as a chip */ + /** add the current input value as a selection */ const handleEnter = () => { if (inputValue.length) { - addChip(inputValue); + addSelection(inputValue); } }; @@ -208,13 +207,13 @@ export const Autocomplete: React.FC = ({ closeMenu && setMenuIsOpen(false); }; - /** add the text of the selected item as a new chip */ + /** add the text of the selected menu item to the selected items */ const onSelect = (event?: React.MouseEvent) => { if (!event) { return; } const selectedText = (event.target as HTMLElement).innerText; - addChip(selectedText); + addSelection(selectedText); event.stopPropagation(); focusTextInput(true); }; @@ -293,10 +292,13 @@ export const Autocomplete: React.FC = ({ - {selections.map((currentChip) => ( - -