contentEditable

contentEditable.js

// https://stackoverflow.com/questions/6536166/how-to-find-absolute-or-relative-position-of-last-letter-inside-an-input-field
<div id="textbox">
    <span id="edit" contentEditable></span>
    <span id="end"></span>
</div>
<div id="report">x:? , y:?</div>


// css
#textbox {
    border: solid black 1px;
    min-height: 1em;
    white-space: nowrap;
}


// javascript
$(function() {
    $('#textbox').click(function() {
         $('#edit').focus();
    });

    $('#edit').keypress(function() {
        var endoff = $('#end').offset();
        $('#report').html('x:' + endoff.left + ' , y:' + endoff.top);
    });
});

    useEffect(() => {
        function listener() {
            setShowCalendar(false);
        }
        document.addEventListener("click", listener);
        return () => {
            document.removeEventListener("click", listener);
        };
    }, []);

.test {
 pointer-events: none
}