0
165
VistasMaterial UI: Rebuilding TextField Google Docs "Add People" functionality
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: 
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.
1 Respuestas
Responde la pregunta0
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 :)