JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable>editable</div>
<button>button 1</button>

<input value="input">
<button>button 2</button>

<!--

STEPS TO REPRODUCE THE WEBKIT CONTENTEDITABLE FOCUS ISSUE:

1. Click editable gray box.
2. Click button 1.
3. Type an "x".

Notice that the blinking caret for text input was still in the editable box after step 2, even though focus had left the box. The blinking caret should have been gone.

After step 3, an "x" was added to the editable box and focus had returned to it. Neither of those things should have happened.

To see the expected behavior, repeat the steps with the input box below and button 2.

-->

CSS

div[contenteditable] {  
  width: 100px;
  background: #eee;
  padding: 2px 4px;
}

input {
  display: block;
  width: 100px;
  margin-top: 20px;
}