facebook/react

Bug: `textarea` inputs in Safari stop accepting input on certain empty lines

iansan5653 opened this issue · 7 comments

iansan5653 commented

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 commented

@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.

  • 👍1
keithamus commented

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/

  • 👍1
blghns commented

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

Nedomas commented

I don't think this is related to deleting. I get the same problem if I start entering text on a previously empty line, but one that has content in lines after it.

For example, enter this into the textarea:

1
2

4

Then click on the missing line (where 3 would be) and try to start typing - it won't work. This happens both with controlled and uncontrolled textareas.

  • 👍2
iansan5653 commented

Oh interesting. Maybe a better title than would be "textarea inputs in Safari stop accepting input on certain empty lines" 🤔

  • 👀1