<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Regression: Pressing Return in a contenteditable no longer inserts a line break under certain conditions"
href="https://bugs.webkit.org/show_bug.cgi?id=167525">167525</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Regression: Pressing Return in a contenteditable no longer inserts a line break under certain conditions
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari Technology Preview
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>HTML Editing
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>sstephenson@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=299951" name="attach_299951" title="Minimal test case">attachment 299951</a> <a href="attachment.cgi?id=299951&action=edit" title="Minimal test case">[details]</a></span>
Minimal test case
Pressing the Return key in a contenteditable element no longer inserts a line break under the following conditions:
1) A mutation observer is observing subtree changes to the editor element and synchronously replacing the contents of the editor element in response.
2) An input event listener is installed anywhere on the page*.
3) The window's selection | is collapsed ahead of two line breaks, in the following configuration: <div>|<br></div><div><br></div>
This behavior is new in Safari 10.1/Safari Technology Preview, and is not present in other major browsers, including older versions of Safari.
Attached please find a minimal test case (contenteditable-return.html). Use the following steps to reproduce the issue:
1) Open the test case file. The element outlined in red is a contenteditable element. Observe that the contents of the editor are a <div> with a single <br> inside. The editor has focus and the window's selection is collapsed just before the <br>.
2) Press Return. Observe that the editor grows by one line in height, as expected. The contents of the editor are now <div><br></div><div><br></div>. The script on the page restores the cursor to its previous position, before the first <br>.
3) Press Return again. Observe that the editor, unexpectedly, does not grow in height. The contents of the editor are unchanged.
The test case is a simplified representation of the mechanics of the Trix rich text editor (<a href="https://github.com/basecamp/trix">https://github.com/basecamp/trix</a>), which monitors mutations and input events to update an internal document model, and then renders that model back to the contenteditable element as it changes.
* Note that on at least one computer, I am able to reproduce the issue without an input event listener installed. That it is sensitive to the timing of different computers seems to suggest a race condition. I speculate that presence of an input event listener causes WebKit to do additional work on the JS thread that it wouldn't otherwise do, triggering the symptoms above.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>