JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<textarea rows="6" cols="50">Textarea</textarea>
<div  id="myTA" contenteditable="true" >DIV with contenteditable="true"</div>

<p>
    Elements are not set as the focused element before the focus event is fired.
</p>

CSS

#myTA {
    border: solid 1px;
    height: 100px;
    background-color: lightblue;
}
textarea {
    background-color: lightyellow;
}

JavaScript

function onFocus() {
    console.clear();
    // Open console
    console.log('Focused: ', this.webkitMatchesSelector(':focus'));
    var elem = this;
    
    setTimeout(function() {
        console.log('Set after the event is fired: ',
                    elem.webkitMatchesSelector(':focus'));
    });
}

var textarea = document.querySelector('textarea');
var div = document.getElementById('myTA');

textarea.addEventListener('focus', onFocus, false);
div.addEventListener('focus', onFocus, false);