Bug: textarea inputs in Safari stop accepting input if certain lines are deleted

[iansan5653]

This is a strange one that I honestly couldn't believe wasn't caused by our app, but it turns out I can reproduce it in a minimal fresh React app as well: if you have a <textarea> input and you select and delete any line other than the first, second, or last, you cannot type in that input anymore until you leave and refocus it. This is only reproducible in Safari.

React version: 18.2.0
Safari version: 17.3
MacOS version: Sonoma 14.3

Steps To Reproduce

1. Render a <textarea> with four or more lines of initial content
2. Select a line other than the first, second, or last
3. Delete that line by pressing Delete
4. Attempt to keep typing

Link to code example: https://github.com/iansan5653/textarea-safari-bug

Screen recording of the bug (based on running the linked repo):

Screen.Recording.2024-02-16.at.2.07.16.PM.mov

The current behavior

Upon deleting the line, the line cannot be typed into anymore. Moving the caret to another line allows typing, but moving it back to the deleted line does not. Sometimes an errant character appears in the deleted line. Blurring (moving focus away from) the input and refocusing it makes the whole input interactive again, but does not restore lost input.

The expected behavior

The input should remain full interactive as normal.

More details

• Happens with controlled or uncontrolled inputs
• Does not reproduce in Chrome or Firefox
• Does not reproduce if you select the line and just start typing - you must delete the content first
• Does not seem to reproduce if the input starts out at less than four lines and then more lines are typed

[blghns]

@iansan5653 Nice bug writeup! I am seeing this issue too https://jsfiddle.net/bilgehansolo/0vmL5cse/ here is the same code on a fiddle. Also tried passing the value as a defaultValue instead of children, it still had the same problem.

Also wanted to note that this is probably not a safari bug https://jsfiddle.net/bilgehansolo/3mwroLys/ textarea as pure html element works as expected.

[keithamus]

Instead of setting the value inside the node, I refactored it to use a useEffect and set the actual DOM nodes .value. The bug seems to not be present in this case. https://jsfiddle.net/nkrLvm7w/

[blghns]

I wonder if this is a React bug or a ReactDOM bug.