JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li draggable="true">
        <textarea>Click anywhere in here with mouse to set caret position - it should not work in IE/Firefox, but is fine in Chrome. Then, click the button and try again - it should now work as-expected.</textarea>
        <br />
        <button>Remove draggable attribute</button>
    </li>
    <li draggable="true">
        <br />
        <br />
        <textarea class="workaround">I am a workaround and should work fine in all browsers.</textarea>
    </li>
</ul>

CSS

textarea {
    height: 300px;
    width: 300px;   
}

JavaScript

$(function() {
    $('button').on('click', function() {
        $('li').attr('draggable', 'false');
    });        
    
    $('.workaround').on('mousedown', function() {
        $(this).parent().attr('draggable', 'false');
    });
    
    $('.workaround').on('mouseup', function() {
        $(this).parent().attr('draggable', 'true');
    });
});