HTML5 contenteditable - child block element with contenteditable=false prevents getting focus on parent

Question

I'm experiencing an unwanted behavior with contenteditable elements. When nesting a block element with contenteditable=false in a parent with contenteditable=true, I can't get edit the parent element at all.

.edit-box{
  border: 1px solid black;
  padding: 10px;
}
.tag{
  display:block;
  background-color: red;
  color:white;
}

<div id="test" contenteditable="true" class="edit-box">
  <span class="tag" contenteditable="false">TAG</span>
</div>

It is only possible to edit/get focus when there's more content, besides the block element.

Browser: Chrome

Any suggestions to prevent this behavior?

Answer 1

Add some content to edit within the parent element. It will be editable. I mean like below:

<div id="test" contenteditable="true" class="edit-box">
 <span class="someclass">Content to be editable</span>
 <br>
 <span class="tag" contenteditable="false">TAG</span>
</div>