Text field with multiple value(image included for reference)

Question

I'm looking for a text field with multiple inputs as:

Here as you can see I can add new text and on press of enter it saves that keyword.

Can someone guide which package to look for.... I found something similar in material ui autocomplete's customized hook: https://material-ui.com/components/autocomplete/,

But I don't want it to be drop down I want it to be simply be a text field with option as shown in image.

I cannot find with such functionality or I might be looking work as I don't know proper term for it.

Any guidance will be of great help.

I've included material-ui , reactstrap as this is something I have worked with so if there is any other package also let me know

Answer 1

I was also building something like this few days back. This is what I've built till now.

import {
  Chip,
    FormControl,
    Input,
    makeStyles,
} from "@material-ui/core";
import React, { useEffect, useState } from "react";
import "./styles.css";


export default function App() {
    const classes = useStyles();
    const [values, setValues] = useState(["test"]);
    const [currValue, setCurrValue] = useState("");

    const handleKeyUp = (e) => {
        console.log(e.keyCode);
        if (e.keyCode == 32) {
            setValues((oldState) => [...oldState, e.target.value]);
            setCurrValue("");
        }
    };

    useEffect(() => {
        console.log(values);
    }, [values]);

    const handleChange = (e) => {
        setCurrValue(e.target.value);
  };
  
  const handleDelete = ( item, index) =>{
    let arr = [...values]
    arr.splice(index,1)
    console.log(item)
    setValues(arr)
  }

    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
            <FormControl classes={{ root: classes.formControlRoot }}>
                <div className={"container"}>
                    {values.map((item,index) => (
                        <Chip  size="small" onDelete={()=>handleDelete(item,index)} label={item}/>
                    ))}
                </div>
                <Input
                    value={currValue}
                    onChange={handleChange}
                    onKeyDown={handleKeyUp}
                />
            </FormControl>
        </div>
    );
}

const useStyles = makeStyles((theme) => ({
    formControlRoot: {
        display: "flex",
        alignItems: "center",
        gap: "8px",
        width: "300px",
        flexWrap: "wrap",
        flexDirection: "row",
        border:'2px solid lightgray',
        padding:4,
        borderRadius:'4px',
        "&> div.container": {
            gap: "6px",
            display: "flex",
            flexDirection: "row",
            flexWrap: "wrap"
        },
        "& > div.container > span": {
            backgroundColor: "gray",
            padding: "1px 3px",
            borderRadius: "4px"
        }
    }
}));

Here is the working demo:

Answer 2

One possible way to do this using react-hook-form and Autocomplete using the Chip with renderTags function here is an example:

import {
  Box,
  TextField,
  Autocomplete,
  Chip,
} from '@mui/material'
...
const {
    handleSubmit,
    control,
    formState: { errors },
} = useForm()

...
<Box mt={2}>
    <Controller
    control={control}
    name="tags"
    rules={{
        required: "Veuillez choisir une réponse",
    }}
    render={({ field: { onChange } }) => (
        <Autocomplete
        defaultValue={
            useCasesData?.tags ? JSON.parse(useCasesData?.tags) : []
        }
        multiple
        id="tags-filled"
        options={[]}
        freeSolo
        renderTags={(value, getTagProps) =>
            value.map((option, index) => (
            <Chip
                variant="outlined"
                label={option}
                {...getTagProps({ index })}
            />
            ))
        }
        onChange={(event, values) => {
            onChange(values);
        }}
        renderInput={(params) => (
            <TextField
            {...params}
            label="Métadonnées"
            placeholder="Ecriver les métadonnées"
            helperText={errors.tags?.message}
            error={!!errors.tags}
            />
        )}
        />
    )}
    />
</Box>