Electron: elemento de entrada removido do DOM consome ^Z até que sua pilha de desfazer esteja vazia

Criado em 3 dez. 2015 · 3Comentários · Fonte: electron/electron

Reprodução mínima: https://gist.github.com/DanielDignam/b49084941a2f731501d5

Estamos usando o nó 4.1.1, Chrome 45.0.2454.85 e Electron 0.35.2, no Windows 10

Execute o aplicativo anexado. Observe que ^Z se reporta corretamente ao console. Digite algo na caixa de entrada e aperte o botão para remover o elemento do DOM. Aperte ^Z note que não reporta. Aperte ^Z novamente e observe que isso acontece.

Se você executar novamente e colar algo na caixa de texto N vezes, notará que o número de ^Z's necessários antes de ser relatado é N+1.

A implicação é que a caixa de entrada ainda está processando eventos, mesmo que não esteja mais no DOM, e não passa o ^Z adiante até esvaziar sua pilha Undo.

Isso interrompe o desfazer em nosso aplicativo, onde as ações de desfazer do aplicativo não serão restauradas em ^Z se um campo de entrada tiver sido usado e removido do DOM.

Queremos desfazer outro estado em nosso aplicativo quando não há formulário/entrada.

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body id='body'>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script>
    function removeInput(event) {
        var i = document.getElementById("foo");
        var b = document.getElementById("body");
        b.removeChild(i);
    }
    const remote = require('electron').remote;
    const Menu = remote.Menu;
    const MenuItem = remote.MenuItem;
    var template = [
        {
            label: 'Edit',
            submenu: [
                {
                    label: 'Undo',
                    accelerator: 'CmdOrCtrl+Z',
                    click: function () {
                        console.log('Undo called');
                    },
                    enabled: true
                }
            ]
        }];
    menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
</script>
<input id='foo' type='text'/>
<input type='button' onclick='removeInput()'/>
</body>
</html>

Fonte

DanielDignam

Todos 3 comentários

Este é um bug do Chromium ao manipular entradas DOM, acho que a solução é manipular a entrada com eventos DOM manualmente em vez de depender do acelerador do Menu.

Para corrigir isso, temos que nos aprofundar no código-fonte do Chromium, mas isso é muito trabalho. Relatá-lo para o Chromium provavelmente não funcionará também porque, para reproduzi-lo, você precisa adicionar um item de menu personalizado ao Chrome, o que não é possível.

Estou fechando isso porque não vai consertar, já que provavelmente ninguém iria olhar para isso, e você pode contornar isso ouvindo os principais eventos do DOM.

zcbenz em 4 dez. 2015

Para pessoas que se depararam com esse problema como eu: aqui está o problema no rastreador de bugs do Chromium, no momento em que escrevo, ele ainda não foi corrigido.

evgenykochetkov em 14 nov. 2018

😕3

Estou resolvendo isso criando o item de menu sem um acelerador e ouvindo o evento de tecla Ctrl+Z no renderizador. Isso funciona. No entanto, como posso agora obter o atalho "Ctrl + Z" para aparecer ao lado de "Desfazer" no menu?