diff --git a/frontend/src/MuiForms/TagSelector.tsx b/frontend/src/MuiForms/TagSelector.tsx index 5eb52f5c4..a7cab8006 100644 --- a/frontend/src/MuiForms/TagSelector.tsx +++ b/frontend/src/MuiForms/TagSelector.tsx @@ -1,6 +1,7 @@ -import { Autocomplete, Box, Chip, Stack, TextField, Typography } from '@mui/material' +import { Box, Button, Chip, Stack, TextField, Typography } from '@mui/material' import { useTheme } from '@mui/material/styles' import { FormContextType } from '@rjsf/utils' +import { useState } from 'react' interface TagSelectorProps { onChange: (newValue: string[]) => void @@ -8,61 +9,56 @@ interface TagSelectorProps { label: string formContext?: FormContextType required?: boolean - rawErrors?: string[] } -export default function TagSelector({ onChange, value, label, formContext, required, rawErrors }: TagSelectorProps) { +export default function TagSelector({ onChange, value, label, formContext, required }: TagSelectorProps) { const theme = useTheme() - const handleChange = (_event: React.SyntheticEvent, newValues: string[]) => { - onChange([...newValues]) + const [newTag, setNewTag] = useState('') + const [errorText, setErrorText] = useState('') + + const handleNewTagSubmit = () => { + setErrorText('') + if (value.includes(newTag)) { + setErrorText('You cannot add duplicate tags') + return + } + const updatedArray = value + updatedArray.push(newTag) + onChange(updatedArray) + setNewTag('') + } + + const handleChipOnDelete = (tag: string) => { + const updatedArray = value.filter((e) => e !== tag) + onChange(updatedArray) } return ( <> {formContext && formContext.editMode && ( - <> + {label} {required && {' *'}} - option === optionValue} - value={value || ''} - onChange={handleChange} - options={[]} - renderTags={(tagValue: string[], getTagProps) => - tagValue.map((option: string, index: number) => ( - - )) - } - renderInput={(params) => ( - 0} - sx={{ - input: { - color: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, - }, - label: { - WebkitTextFillColor: - theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, - }, - '& .MuiInputBase-input.Mui-disabled': { - WebkitTextFillColor: - theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, - }, - fontStyle: value ? 'unset' : 'italic', - }} - /> - )} - /> - + + setNewTag(e.target.value)} /> + + + + + {value.map((tag) => ( + handleChipOnDelete(tag)} /> + ))} + + + + {errorText} + + )} {formContext && !formContext.editMode && ( <>