contenteditable inside a css grid element, seems to be a bug in Google Chrome

Question

There seems to be a bug in Google Chrome at least (not in FF), which makes a contenteditable element inside a grid to be activated, when a click occurs outside of the element.

Is it possible to fix it quick, w/o waiting this to be fixed in Chrome?

Here is an example with display: grid;, if the user clicks arbitrarily on the page (outside of the contenteditable element), then it gets activated (in Chrome).

<div style="width: 300px; margin: 0 auto; display: grid; overflow: hidden; border: 1px solid black;">
  <div contenteditable="true" style="">aaa</div>
</div>

No grid:

<div style="width: 300px; margin: 0 auto; overflow: hidden; border: 1px solid black;">
  <div contenteditable="true" style="">aaa</div>
</div>

I've tried overflow: hidden, borders, paddings etc. No avail.

Thank you.

Answer 1

The quickest solution seems to be to add a wrapper to the contenteditable element, so that a grid-cell element is not contenteditable:

<div style="width: 300px; margin: 0 auto; display: grid; overflow: hidden; border: 1px solid black;">
  <div>
    <div contenteditable="true" style="">aaa</div>
  </div>
</div>