Элемент <select> является интерактивным элементом содержимого в HTML.Он работает как контекстное меню, вызываемое правой кнопкой мыши, и отображается над всеми элементами документа.
В вашем случае, когда вы нажимаете кнопку выбора после ввода своего имени в поле, в последовательности происходят следующие вещи:
- Вызывается событие размытия в текстовом поле, и открывается диалоговое окно.
- Открывается меню выбора.
Таким образом, в соответствии с последовательностью, то, что происходит, является правильным, т.е. диалоговое окносначала открывается, а затем выбирается, так что выбор над диалоговым окном, который является правильным.
Но, конечно, интерфейс не выглядит хорошим, когда это происходит, поэтому есть обходной путь, то есть скрыть выбор, когда диалоговое окно открывается, а затем показать его снова, скажем, через 0,1 секунды.Поскольку выбор скрывается, его меню скрывается вместе с ним.
Я реализовал это для вас.Пожалуйста, взгляните на этот Stackblitz: Выберите закрытие при открытии диалога
Надеюсь, это поможет.