Bug 154496 - Only first character inserted into a element in contenteditable mode
Summary: Only first character inserted into a element in contenteditable mode
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: Safari 9
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2016-02-20 04:28 PST by m.lewandowski
Modified: 2017-07-25 08:11 PDT (History)
3 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description m.lewandowski 2016-02-20 04:28:15 PST
## Repro steps

1. Open http://codepen.io/mlewand/pen/obRKqM?editors=1100
1. Focus contenteditable div (marked with blue border)
1. Make a selection containing at least one character at the end of link e.g. `<a href="#">bar baz [bom]</a>`
1. Type "aaa"

### Expected

Link inner text is changed to `<a href="#">bar baz aaa</a>`.

### Actual

Only first character gets into the link, any subsequent will be placed outside the anchor.

### References

This issue has been picked up by Drupal community https://www.drupal.org/node/2671896.
Comment 1 m.lewandowski 2016-02-20 04:29:19 PST
This issue does not appear in FF, IE11. It's also buggy in Chromium.
Comment 2 Alexey Proskuryakov 2016-02-21 16:42:09 PST
Could you please elaborate on why you are calling this a bug?

The behavior is consistent with what happens when typing right after a link (which is also different from Firefox).
Comment 3 m.lewandowski 2016-02-22 04:02:40 PST
Sure, I think there is misunderstanding:

It's not that you're typing after the link, but your selection is still *within* the link.
Comment 4 m.lewandowski 2016-02-22 04:03:51 PST
Here's a reference to this issue in Chromium tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=588418
Comment 5 Alexey Proskuryakov 2016-02-22 13:17:45 PST
The selection is not within the link after the first keypress. It's not a coincidence that the first keypress works as you expect.
Comment 6 m.lewandowski 2016-03-23 06:26:01 PDT
Yes, selection is making its way out of the anchor element, and this is the source of the problem.

To have a better understanding of this issue look at it compared to any other inline element, such as bold here: http://codepen.io/mlewand/pen/ONmmmE?editors=1000

Cross linking yet another user request, this time in CKEditor's tracker http://dev.ckeditor.com/ticket/14506
Comment 7 Alberto Fernandez 2017-07-25 08:11:07 PDT
I'm also suffering this bug. For me is even worse, since on my custom editor the user can edit the anchor links themselves.

This is an example of markup the user can end up with which gives the issues:
"<a href="#" contenteditable="true"><b>Select all the text and try to type more than two characters</b></a>"

Steps to Reproduce

 1. Open my live codepen at https://codepen.io/sinspiral/pen/xLbdqR
 2. Select all the text.
  * It doesn't matter if using Ctrl/Cmd+A, using the mouse, or the key arrows with Shift pressed.
 3. Type more than two characters, i.e. "lorem ipsum"

The new text typed will appear, so the content will be "lorem ipsum".


After the second character is pressed or the whole content dissappears, or only the first character happens. Then you cannot continue typing anymore.


Webkit Browsers where I can reproduce it:
 * Safari Version: 10.1.2 (12603.3.8)
 * Chrome Version 59.0.3071.115 (Official Build) (64-bit)
 * PhantomJS: Version 2.1.1
 * QtWebkit (annulen): 5.212.0 Alpha 2

OS Version:
 * macOS 10.12.6
 * Windows 10