Предотвратить div от потери внимания

Question

Есть ли способ предотвратить потерю внимания div к конкретным действиям?

У меня есть сетка, как в Excel.Каждая ячейка - элемент div имеет событие blur, onclick, onkeydown.

onKeyDown метод:

    onKeyDown(event) {
        const { keyCode } = event;
        let element;

        switch (keyCode) {
        case 13:
            // Key: ENTER
            if (this.isEditingAllowed) {
                element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row}`);
                // I would love to stop propagation of that event here - do not call a blur !!
            }
            break;
        case 37:
            // Key: LEFT
            element = document.querySelector(`.keyboard-navigable-${this.column - 1}-${this.row}`);

            break;
        case 38:
            // Key: UP
            element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row - 1}`);

            break;
        case 39:
        case 9:
            // Key: RIGHT || TAB
            element = document.querySelector(`.keyboard-navigable-${this.column + 1}-${this.row}`);
            if (!element) {
                // We get out of bounds - go to the next line
                element = document.querySelector(`.keyboard-navigable-0-${this.row + 1}`);
            }

            break;
        case 40:
            // Key: DOWN
            element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row + 1}`);

            break;
        default: break;
        }

        if (element) {
            element.focus();
        }
    }

Как мы видим по клавише enter, я бы хотел прекратить распространять это событие, так как оно не позволяет вызывать размытие - почему?У меня есть условный рендеринг других элементов, когда мы входим в режим редактирования.Я не хочу потерять контекст элемента позади..preventDefault() или .stopPropagation() не работает.И мне нужно прислушиваться к событиям blur, потому что одни и те же элементы также имеют события onclick, и я не хочу нигде хранить selectedDOMElement до .blur(), если он существует в методе onclick, когда у нас есть его собственная поддержка.

Есть ли другой способ остановить размытие / сохранить фокус "родительского" элемента, когда мы нажимаем, например, клавишу enter?

Answer 1

Если вы не хотите терять фокус на поле ввода, не делайте этого.

case 13:
    // Key: ENTER
    if (this.isEditingAllowed) {
        // simply remove this so that later you don't move the new input field:
        // element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row}`);
    }
    break;
...
if (element) {
    element.focus(); // this is YOU telling the previous element to loose focus ;-)
}