JSFiddle - React, Tailwind, and code Playground

HTML

<p>Bug #12492 "IN TEXTAREA FOCUS EVENT HANDLER, $(THIS).IS(':FOCUS') == FALSE IN CHROME AND SAFARI" came in jQuery 1.8.0 and was fixed <i>for textareas</i> in 1.8.2.</p>
<p>The very same bug still exists in div elements with contenteditable="true"</p>
<br />
<p>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  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

$('#myTA').focus(function() {
    $(this).html($(this).html() + '<br />' + 'Am I focused? <span class="highlight">' + $(this).is(':focus') + '</span>');
    $(this).html($(this).html() + '<br />' + 'Am I active? ' + $(this).is(':active'));
});
$('textarea').focus(function() {
    $(this).val($(this).val() + '\n' + 'Am I focused? *' + $(this).is(':focus') + '*');
    $(this).val($(this).val() + '\n' + 'Am I active? ' + $(this).is(':active'));
});