Ian Storm Taylor Reporter
	Description • 8 years ago

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Steps to reproduce:

If you have a DOM structure that looks like:

  <div contenteditable="true">
    <div contenteditable="false">
      <div contenteditable="true">
        <!-- Cursor is here. -->
      </div>
    </div>
  </div>




Actual results:

The outer <div contenteditable="true"> will be the one with :focus, instead of the inner one. Which means it's impossible to style the inner <div> based on it having focus.


Expected results:

The inner <div contenteditable="true"> should be the one with :focus instead. Safari and Chrome both get this right.

	Ian Storm Taylor Reporter
	Comment 1 • 8 years ago

Actually, an update (I can't seem to edit the previous comment):

If you click on the inner <div contenteditable="true"> to set the cursor there, the :focus will correctly be set as the inner element.

However, if you use the arrow keys to position the cursor to the inner <div contenteditable="true"> element, the :focus will incorrectly remain on the outer <div>.

	Tooru Fujisawa [:arai]
	Comment 2 • 8 years ago

here's testcase

	Tooru Fujisawa [:arai]
	Comment 3 • 8 years ago

looks like it's the issue that arrow key doesn't change the focus, based on current cursor position.
I don't get onfocus event neither with it.

tab key can change the focus.

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 4 • 7 years ago

Edge doesn't move focus too.

If we move focus from outer contenteditable to inner contenteditable, we need to support moving focus from inner one to outer one with arrow keys.  However, I'm not sure this is reasonable behavior for our implementation.

And I wonder, it provides different UX for users in following case:

<label>name: <br><input type="text"></label>
<label>email address: <br><input type="text"></label>

vs.

<div contenteditable>
  <div contenteditable="false">
    <label>name: <br><span contenteditable></span></label>
    <label>email address: <br><span contenteditable></span></label>
  </div>
</div>

In above case, user can not move focus by arrow keys, but in bottom case, they can do it.

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 5 • 7 years ago

FYI: Even on Chrome, user cannot move focus between different editing hosts, e.g.,
> data:text/html,<div contenteditable>aaa</div><div contenteditable>bbb</div>

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 6 • 7 years ago

Somebody cced by this post might have some ideas.

	Jonathan Watt [:jwatt]
	Comment 7 • 6 years ago

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)