Выпадающий фокус не работает с дочерними элементами, как ожидалось

Я знаю, что это распространенный вопрос, но ни один из ответов, которые я видел, не решает мою проблему, извиняюсь, если я пропустил один, и это, очевидно, можно удалить / пометить как дубликат ...

Разметка

<div class = "has-dropdown">
    <button class = "js-dropdown-trigger">
        Dropdown
    </button>

    <div class = "dropdown">
        <div class = "dropdown__item">
            Some random text with a <a href = "#" class = "stop-propagation">link</a> in it.
        </div>
        <div class = "dropdown__divider"></div>
        <div class = "dropdown__item">
            <a href = "#">Item One</a>
        </div>
        <div class = "dropdown__item">
            <a href = "#">Item Two</a>
        </div>
        <div class = "dropdown__item">
            <a href = "#">Item Three</a>
        </div>
    </div>
</div>

Сценарий

$('.has-dropdown').off().on('click', '.js-dropdown-trigger', (event) => {
    const $dropdown = $(event.currentTarget).next('.dropdown');

    if (!$dropdown.hasClass('is-active')) {
        $dropdown.addClass('is-active');
    } else {
        $dropdown.removeClass('is-active');
    }
});

$('.has-dropdown').on('focusout', (event) => {
    const $dropdown = $(event.currentTarget).children('.dropdown');

    $dropdown.removeClass('is-active');
});

Укладка

.has-dropdown {
    display: inline-flex;
    position: relative;
}

.dropdown {
    background-color: #eee;
    border: 1px solid #999;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    margin-top: 5px;
}

.dropdown.is-active {
    display: flex;
}

.dropdown__item {
    padding: 10px;
}

.dropdown__divider {
    border-bottom: 1px solid #999;
}

Скрипка

http://jsfiddle.net/joemottershaw/3yzadmek/

Это невероятно просто: щелчок по js-dropdown-trigger переключает выпадающий класс is-active, щелчок за пределами контейнера has-dropdown удаляет раскрывающийся класс is-active.

За исключением того, что я ожидал, что сосредоточение внимания на элементе-потомке (щелчок или вкладка) элемента has-dropdown будет означать, что обработчик событий focusout не должен запускаться, поскольку вы все еще сосредоточены на элементе-потомке контейнера has-dropdown.

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements

Я знаю, что могу удалить обработчик событий focusout и использовать что-то вроде:

$(document).on('click', (event) =>{
    const $dropdownContainer = $('.has-dropdown');

    if (!$dropdownContainer.is(event.target) && $dropdownContainer.has(event.target).length === 0) {
        $dropdownContainer.find('.dropdown').removeClass('is-active');
    }
});

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

Я хочу придерживаться метода focusout, если это вообще возможно.

Обновлено на основе ответа даршанаги

Хотя обновленный сценарий работает для отдельных элементов, добавление других элементов в body приводит к тому, что focusout больше не работает должным образом. Я думаю, это потому, что утверждение if кажется верным, даже когда фокус применяется к любому элементу после контейнера has-dropdown, а не только к потомкам? Причина, если вы хотите обновить HTML и добавить больше фокусируемых элементов, таких как ввод после раскрывающегося списка. При переходе от последнего фокусируемого элемента из контейнера has-dropdown к входу раскрывающийся список остается активным. Он работает только в том случае, если раскрывающийся список является последним элементом в DOM и срабатывает только тогда, когда фокус полностью теряется на DOM.