как закрыть "флажок" выпадающего на Blur в js?

Question

У меня есть выпадающий список с помощью невидимого флажка. Этот раскрывающийся список работает нормально, но он не хочет закрываться, если я снова не нажму на ярлык.

Проблема в том, что onBlur никогда не вызывается. Почему? Если я установил onMouseOut - он срабатывает нормально, но сразу закрывает раскрывающийся список.

Я видел Как скрыть раскрывающийся список, когда пользователь нажимает за его пределами , но я не понял как передать реквизит до самого последнего решения ...

        <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

Ну, я не понял, как позвонить на Blur, либо я сделал это:

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