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="6" cols="50">Textarea</textarea>
<div tabindex="1" id="myTA" contenteditable="true" >DIV with contenteditable="true"</div>

CSS

#myTA {
    border: solid 1px;
    height: 100px;
    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('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>');
    $(this).html($(this).html() + '<br />' + 'Am I active? ' + $(this).is(':active'));
    $(this).html($(this).html() + '<br />' + 'Am I activeElement? ' + (this == document.activeElement));
    console.log(matches.call(this, ":focus"));
});
$('textarea').focus(function() {
    $(this).val('Am 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"));
    $(this).val($(this).val() + '\n' + 'Am I active? ' + $(this).is(':active'));
    $(this).val($(this).val() + '\n' + 'Am I activeElement? ' + (this == document.activeElement));
console.log(matches.call(this, ":focus"));
});