Can't select text in contenteditable in Chrome by using keyboard

Question

In Chrome, I can't select the contenteditable text context by using the keyboard in Chrome when the text contains a long string that wraps to the next line.

This repro's in Chrome (latest; Chrome 47 at the time of my writing this).

Repro steps

1. Click to place the cursor at the end of the contentedtable div (in the snippet below).
2. Hold shift and hit the up arrow a bunch of times.

Expected: All text becomes selected.

Observed: The text before the space ("foo") is never selected.

Here's the code. NOTE the character after "foo" is a space, not a newline!

<div contenteditable="true" style="background: #ddd; width: 200px; height: 100px;">foo asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;</div>

Answer 1

Actually, that's the correct behavior of textboxes in general.

In this case, you see the two words in different lines because the second one is wider than the container, so you see a line break and you try to use the up arrow to select "foo".

But, as you say in the question, after "foo" there is a space character, so you must use the left arrow to select it.

Just imagine the same case but with a full width textbox, you would only try to use the left arrow. Only the style changes here, not the behavior for that specific content.