I am experimenting with Material UI and seeking assistance on how to mimic a feature in TextFields where a text input receives a styled bubble when the user presses the spacebar or enter key. For instance, in Google Sheets, users can input multiple email addresses in a document-sharing feature. I have attempted to use the ‘InputProps’ property of TextFields, but I’m having difficulty converting the typed text into an object when a space is detected.
I’ve gone through similar challenges with adding such a feature where user input converts into tags or bubbles. One solution you might consider is leveraging the use of Chip components from Material UI. You can capture the input value and, upon detection of a space or enter key (using the onKeyDown event), create a new Chip with the input value as a label, then reset the input field. Be cautious with handling value conversion and chip management effectively to avoid unintended behaviors.