JSFiddle - React, Tailwind, and code Playground

by Martin Parenteau

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="text" style="height: 50px; border: 1px solid black;">
    <p style="width: 250px;">
        text text text text text text 
    </p>
</div>
<br/>
<input type="text" id="chatInput">

JavaScript

$('#text').click(function () {
    var container = this;
    setTimeout(function () {
        var selectedElement = null;
        var selectedText = null;
        if (window.getSelection) {
            var selection = window.getSelection();
            if (selection) {
                selectedText = selection.toString();
                if (selection.anchorNode) {
                    selectedElement = selection.anchorNode.parentNode;
                }
            }
        }
        else if (document.selection && document.selection.type === "Text") {
            var selection = document.selection;
            selectedText = selection.createRange().text;
        }
        if (!(selectedText && selectedText.length > 0) || (selectedElement !== container && !$(container).has(selectedElement))) {
            setTimeout(function () { $('#chatInput').focus(); }, 0);
        }
    }, 0);
});