Не открывается диалог при нажатии ESC
 

Добрый день!

В целом задача выглядит таким образом: В текстовое поле вводится значение, если пользователь жмет ENTER, то значение сохраняется. Если пользователь жмет ESC, то в случае, если текстовое поле оказалось пустым - мы просто ничего не делаем, если же там было какое-то значение, то необходимо спросить у пользователя, надо ли сохранить введенное значение

У меня возникла следующая проблема: Есть текстовое поле, на которое навешививается обработчик события onkeypress.

input.onkeydown = function () {
        if (event.keyCode == 13) {
            //save value
        } else if (event.keyCode == 27) {
            //input.blur();
            let dialog = createYesDoDialog("Добавить домен " + input.value + "?",
                function () {tryToSaveNewDomen(input)},
                function () {initDomens()});
            dialog.showModal();
        }
    };

Функция createYesNoDialog() инициализирует диалог.

function createYesDoDialog(msg, onYesClick, onNoClick) {
    let dialog = document.getElementById("yesNoDialog");
    document.getElementById("msgYND").innerHTML = msg;
    document.getElementById("yesBtnYND").onclick = function () {
        onYesClick();
        dialog.close();
    };
    document.getElementById("noBtnYND").onclick = function () {
        onNoClick();
        dialog.close();
    };
    dialog.onkeydown = function () {
        onNoClick();
        dialog.close();
    };
    return dialog;
}

Насколько я понимаю, проблема возникает из-за нажатия на ESC, т.е. диалог закрывается именно из-за этого нажатия. Если я сменю в условии 27 (ESC) на, например 68 (d) и если я нажму d при вводе, то диалог появится.

Как мне предотвратить закрытие диалога в ситуации, когда я нажимаю на ESC в поле ввода?

niki,
как устроен сам dialog, dialog.close();dialog.showModal();?

<dialog id="yesNoDialog">
            <h5 id="msgYND" class="light-blue-text">MSG:</h5>
            <div class="row right">
                <div class="col">
                    <button id="yesBtnYND" class="btn waves-effect waves-light light-blue lighten-1">Да</button>
                </div>

                <div class="col">
                    <button id="noBtnYND" class="btn waves-effect waves-light light-blue lighten-1">Нет</button>
                </div>
            </div>
        </dialog>

Использую material design.

Что означает как устроен сам dialog, dialog.close(), dialog.showModal()?

niki,
может так?

input.onkeydown = function (event) {
        if (event.keyCode == 13) {
            //save value
        } else if (event.keyCode == 27) {
             event.stopPropagation();
            //input.blur();
            let dialog = createYesDoDialog("Добавить домен " + input.value + "?",
                function () {tryToSaveNewDomen(input)},
                function () {initDomens()});
            dialog.showModal();
        }
    };

Нет, не помогло.
Прочитал, что событие пробрасывается на все родительские элементы и дочерние. Диалог скорее всего является дочерним объектом, поэтому он так же отлавливает событие нажатие клавиши. Диалог при нажатии на ESC закрывается.

Получается есть два варианта:
1. Отменить пробросс события дальше.
2. Запретить закрываться диалогу при нажатии на ESC.

Может быть вы знаете, как реализовать что-то одно из этого?

niki,
попробуйте заменить
dialog.showModal();
на

window.setTimeout(dialog.showModal,0)