Bullet point text areas containing ampersands shift cursor to the end when editing

[tbui17]

Context

When an "&" character is present in any bullet point in a bullet point text area (i.e. description, additional information fields, the text cursor will always move to the end of the last bullet point when typing. This effectively prevents you from making any further edits due to misplacement.

1-page resumes are highly encouraged in recruiting. Ampersand characters are an important tool in minimizing number of lines in a resume. Search and replace operations easily fit into automations for refactoring resumes, providing high value in time saved with little investment. They also avoid introducing additional "noise" or invalid facts that AI services tend to introduce. Without this, we would need to make a tradeoff between safe automatic refactorings and being able to make quick revisions for resume tailoring.

Ampersands usually need to be escaped during HTML sanitization and components that handle HTML or rich text may have special handling for them with unintended side effects.

Repro

1. Go to the resume builder (https://www.open-resume.com/resume-builder)
2. Add any job
3. Type or paste the following text in the description bullet point text area:

lorem ipsum dol&or1
lorem ipsum dolor2

There should now be two bullet points.
4. Attempt to edit the first bullet point by typing in it. The text cursor will jump to the end of the second bullet point.

Expected Behavior

The text cursor should still remain on the first bullet point and move linearly as the user types.

Environment

• Google Chrome 133.0.6943.54
• Windows 11 OS

[tbui17]

Found out issue is related to the component library used for the text areas and this is a known issue. It seems like it is no longer maintained.

lovasoa/react-contenteditable#285