JSFiddle - React, Tailwind, and code Playground

HTML

<p>Bug #12492: Click into the yellow textarea or the blue DIV. On focus, the DIV claims it does not have focus, while the textarea behaves correctly. (Safari and Chrome only.)</p>
<br>
<textarea rows="11" cols="50">Textarea</textarea>
<div tabindex="1" id="myTA" contenteditable="true" >DIV with contenteditable="true"</div>

CSS

#myTA {
    border: solid 1px;
    height: 250px;
    overflow-y: scroll;
    background-color: lightblue;
}
textarea {
    background-color: lightyellow;
}    
.highlight {
    color: red;
}

JavaScript

var matches = document.documentElement.mozMatchesSelector || document.documentElement.webkitMatchesSelector;

$('#myTA').focus(function() {
    $(this).html('DIV with contenteditable="true"<hr />' + 'Am I focused? <span class="highlight">' + $(this).is(':focus') + '</span>');
    $(this).html($(this).html() + '<br />' + 'qSA says focused? <span class="highlight">' + (document.querySelectorAll(':focus')[0]==this)+ '</span>');
    $(this).html($(this).html() + '<br />' + 'mS says focused? <span class="highlight">' + matches.call(this, ":focus")+ '</span>');
    console.log(matches.call(this, ":focus"));
    
    <!-- This is only for documentation: -->
    $(this).html($(this).html() + '<br /><br />||' + $(this).is(':focus') + '||' + (document.querySelectorAll(':focus')[0]==this) + '||' +  matches.call(this, ":focus")+ '|| || || ||');

});
$('textarea').focus(function() {
    $(this).val('Textarea\n\nAm I focused? *' + $(this).is(':focus') + '*');
    $(this).val($(this).val() + '\n' + 'qSA says focused? ' + (document.querySelectorAll(':focus')[0]==this));
    $(this).val($(this).val() + '\n' + 'mS says focused? ' + matches.call(this, ":focus"));
    console.log(matches.call(this, ":focus"));
    
    <!-- This is only for documentation: -->
    $(this).val($(this).val() + '\n\n||' + $(this).is(':focus') + '||' + (document.querySelectorAll(':focus')[0]==this) + '||' +  matches.call(this, ":focus")+ '|| || || ||');
});