Custom textarea objects in React with controlled contentEditable

Issue

This Content is from Stack Overflow. Question asked by Carl Andreas Julsvoll

I’m trying to create a textarea where on enter the input is converted to a custom component (e.g. email) as show below. Any suggestions on how to create this in react?

Goal state

I have tried creating this using a contentEditable div with the values being appended to a list on enterkey pressed (as shown in image 2). However, then I can’t make the div component controlled (for instance removing typed text on enter), nor appending emails correctly inside the controlled state.

Current state

Code (typescript react, stripped away css):

const [emails, setEmails] = useState<string[]>([]);
const [value, setValue] = useState<string>();

const onKeyPress = (e: any) => {
    if (e.charCode === 13 && value) {
        setEmails(
            [...emails, value]
        )
        setValue("");
    }
}
const onInputChange = (e: any) => {
    setValue(e.currentTarget.textContent)
}

return (
    <div>
        <div className="text-left flex ">
            <div className=" flex grow" suppressContentEditableWarning>
                {emails.map((email, id) => (
                    <div className="" key={id} contentEditable="false">
                        {email}
                    </div>
                )

                )}
                <div
                    suppressContentEditableWarning={true}
                    contentEditable={true}
                    className={classNames("grow flex")}
                    onKeyPress={onKeyPress}
                    onInput={onInputChange}
                >
                </div>
            </div>
        </div>
    </div>
)



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?