FF Невозможно выбрать элемент из выпадающего

Question

Существует панель навигации, которая отображается при наведении мыши (событие hoverStateIn()), исчезает при отпускании мыши (событие hoverStateOut()):

HTML

<div id="shownav" (mouseenter)="hoverStateIn()" (mouseleave)="hoverStateOut()">
    <nav class="navbar navbar-dark navbar-expand-md jh-navbar" *ngIf="isHover">
    ...
    </nav>
</div>

Машинопись:

hoverStateIn() {

    this.isHover = true;

    document.getElementById("main-container").style.paddingTop = "70px";
    document.getElementById("styleSelector").style.top = "95px";
}

hoverStateOut() {
    this.isHover = false;

    document.getElementById("main-container").style.paddingTop = "0";
    document.getElementById("styleSelector").style.top = "25px";
}

Navbar содержит раскрывающийся список, и при попытке выбрать элемент из раскрывающегося списка navbar исчезает (проблема существует только в Firefox).

Кажется, что выпадающий контроль в FF теряет фокус и hoverStateOut() срабатывает. Как это исправить?

Stackblitz