how to close "checkbox" dropdown onBlur in js?

Question

I have a dropdown done by invisible checkbox. This dropdown is working ok, but it doesn't want to close unless I click on the label again.

The issue is that onBlur is never got called. Why? If I set onMouseOut - it triggers ok, but it closes the dropdown immedeately.

I've seen How to hide a dropdown when the user clicks outside of it but I didn't figure how to pass props to the very last solution...

        <div onBlur ={handleUncheckCheckbox} className="dropdown">
            <input id="check01" type="checkbox" name="menu"/>
            <label for="check01" className="sorting-element">click me</label>
            <div id ="dd" className="dropdown-content">
                <p>1</p>
                <p>2</p>
                <p>3</p>
            </div>
        </div>

Answer 1

Well, i didn't get how to call onBlur, either I did this:

window.onclick = function(event) {
    if (event.target.className !== "dropdown-icon" ) {
        document.getElementById("dd").style.display = "none";
    }
};