Bug 212292 - Setting textarea value from Javascript corrupts cursor position on backspace
Summary: Setting textarea value from Javascript corrupts cursor position on backspace
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.15
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-05-22 17:06 PDT by Jeff Standen
Modified: 2022-12-27 18:06 PST (History)
5 users (show)

See Also:


Attachments
A video demonstrating the bug (49.59 KB, video/quicktime)
2020-05-22 17:06 PDT, Jeff Standen
no flags Details
A GIF version of the test case video (49.91 KB, image/gif)
2020-05-22 17:07 PDT, Jeff Standen
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jeff Standen 2020-05-22 17:06:20 PDT
Created attachment 400093 [details]
A video demonstrating the bug

Overview:

In Safari 13.1 on macOS 10.14 and 10.15, setting a TEXTAREA's value through Javascript and deleting lines from the middle to the top with the DELETE/BACKSPACE key doesn't remove empty lines. This doesn't occur on any other browser tested (Chrome, Firefox, Opera, Brave, Edge).

Steps to Reproduce:

1. Navigate to the test case at: https://jsfiddle.net/d75xzjg0/3/

2. Insert the cursor on the empty line between 3 and 4.

3. Type DELETE/BACKSPACE six types to remove the lines for 3, 2, and 1.

Actual Result:

The text is removed but the empty lines remain. The position of the lines for 4, 5, and 6 do not change.

Expected Result:

We expect the newly empty lines to be removed with DELETE/BACKSPACE, so the lines for 4, 5, and 6 are pulled up to the top of the TEXTAREA. This is the behavior on other browsers, and the behavior of Safari prior to 13.1.

Notes:

I've attached a video demonstrating the issue.

If the jsFiddle is unavailable, the code to reproduce is:

~~~
<textarea rows="20" cols="50"></textarea>

<script type="text/javascript">
var sel = document.querySelector('textarea');

sel.value = "1\n2\n3\n\n4\n5\n6\n";
</script>
~~~

The issue occurs whether the newlines of the inserted text are CRLF or LF.

The issue also persists whether or not there is default text in the TEXTAREA.
Comment 1 Jeff Standen 2020-05-22 17:07:43 PDT
Created attachment 400094 [details]
A GIF version of the test case video
Comment 2 Jeff Standen 2020-05-22 17:33:22 PDT
If your first keystroke is ENTER, then DELETE/BACKSPACE works as expected from that point.

The bug does not exist in the Safari Technology Preview build.
Comment 3 Radar WebKit Bug Importer 2020-05-25 12:21:11 PDT
<rdar://problem/63603840>
Comment 4 Ahmad Saleem 2022-12-27 18:06:27 PST
I am not able to reproduce this bug in Safari 16.2 shown in the video and Safari matches with Chrome Canary 111 and Firefox Nightly 110.

Marking this as "RESOLVED CONFIGURATION CHANGED". Comment 02 also confirm that that it was not happening in STP.