JSFiddle - React, Tailwind, and code Playground

HTML

<p contenteditable="true">
        Select something up here and click the input below
        <br> on firefox the input get the focus and the text still selected.
        <br> on chrome the text still selected but the input lose focus
    </p>
    
     <input type="text" id="special" style="border: solid blue 1px">

JavaScript

function saveSelection() {
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                return sel.getRangeAt(0);
            }
        } else if (document.selection && document.selection.createRange) {
            return document.selection.createRange();
        }
        return null;
    }
    
    function restoreSelection(range) {
        if (range) {
            if (window.getSelection) {
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.selection && range.select) {
                range.select();
            }
        }
    }
    function resetSelection(range) {
    alert("ok");
    	if(range) {
      	if(window.getSelection) {
        	sel.removeAllRanges();
        }
      }
    }

        var specialDiv = document.getElementById("special");
        var specialDiv = document.getElementById("special");
        var savedSel = null;
    
        specialDiv.onmousedown = function() {

            savedSel = saveSelection(savedSel); // save the selection

        };
        
        specialDiv.onmouseup = function() {
        	alert("ok");
        	resetSelection()
        }
        
        window.onmouseup = function() {
    
            restoreSelection(savedSel); // restore the selection
        };