Material UI: Rebuilding TextField Google Docs "Add People" functionality

user_8811409 0
Viewed 11

I've been playing around with Material UI, and I'm trying to figure out a way to reproduce functionality in TextFields where after the user hits the space or enter button, the input text gets a bubble around it.

For example in Google Sheets, when a user wants to share a document they can enter in emails in this way: enter image description here

I've been trying to play around with the "InputProps" prop of TextFields, but I am struggling to figure out how to turn the text into an object on a space.

material-ui reactjs javascript
1 Answers

Not sure if this is optimal but you could lay out a solution like this:

2 Components: 1 For the Mail Bubble. This component should be simple and straight forward. Lets imagine you name it <Email> and it has an input prop named name

1 For the TextField that handles value changes and renders the Email Bubbles. This component can do something like this:

const InputComponent = () => {
    const [children, setChildren] = useState([]);
    const [value, setValue] = useState("");

    const change = (event) => {
        const newVal = event.target.value;

        if(newVal.includes(" ")){
            setChildren([...children, <Email name={newVal.trim()}/>]}>
            setValue("");
            return;
        }
        setValue(newVal);
    }; 

    return (
    <div>
        {children}
        <TextField onChange={change} value={value}/>
    </div>
    );
}

So if the value in the of the TextField changes it is checked if it contains a space. If so a new Bubble component is created and added to the array. Also the vlaue is then reset so the user can enter a new email.

Disclaimer: I just wrote above as pseudo code, do not expect it to work when you copy paste it. Please try to understand what i did and DIY. Let me know if you had success :)

user_110855150
Related