Модальное исчезает из-за события mouseup (выделите поле ввода в модальном режиме и отпустите кнопку мыши вне модального режима)

Question

Интересная ошибка, когда у вас есть модал с полями ввода формы. Затем вы выделяете текст в одном из полей ввода, так что событие mousedown происходит внутри модального, а событие mouseup происходит вне модального.

Chrome 73 интерпретирует событие mouseup вне модального режима как щелчок и закрывает модальное окно.

Вот оригинальный модальный код:

<div class="modal-wrapper" (click)="close()">
    <div class="modal-background"></div>
    <div class="modal-container" (click)="stopEvent($event)">
        <!-- modal content here -->
    </div>
</div>

Answer 1

Решение состоит в том, чтобы изменить событие щелчка, которое закрывает модальное событие, вместо события mousedown:

<div class="modal-wrapper" (mousedown)="close()">
    <div class="modal-background"></div>
    <div class="modal-container" (mousedown)="stopEvent($event)">
        <!-- modal content here -->
    </div>
</div>