material ui - 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 costomized 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

question from:https://stackoverflow.com/questions/65932218/text-field-with-multiple-valueimage-included-for-reference

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: