input element removed from the DOM consumes ^Z until its undo stack is empty #3682

DanielDignam · 2015-12-03T19:59:15Z

Minimal repro: https://gist.github.com/DanielDignam/b49084941a2f731501d5

We are using node 4.1.1, Chrome 45.0.2454.85, and Electron 0.35.2, on Windows 10

Run attached app. Notice ^Z reports correctly to the console. Type something into the input box and hit the button to remove the element from the DOM. Hit ^Z notice it doesn't report. Hit ^Z again and notice it does.

If you rerun and paste something into the text box N times you'll notice the number of ^Z's it takes before it is reported is N+1.

The implication is that the input box is still processing events even though it is no longer in the DOM, and doesn't pass the ^Z on until it has emptied its Undo stack.

This breaks undo in our application where application undo actions will not be restored on ^Z if an input field has been used and then removed from the DOM.

We want to undo other state in our application when there is no form/input.

<!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>

zcbenz · 2015-12-04T12:07:09Z

This is a bug of Chromium when handling DOM inputs, I think the solution is to handle the input with DOM events manually instead of relying on Menu's accelerator.

To fix this we have to dig into Chromium's source code, but that is just too much work. Reporting it to Chromium is unlikely to work too because to reproduce it you have to add a custom menu item to Chrome, which is not possible.

I'm closing this as won't fix since probably no one would look into it, and you can work around it by listening to DOM's key events.

evgenykochetkov · 2018-11-14T10:39:13Z

For people who stumbled upon this issue like me: here is the issue in the Chromium bug tracker, at the time of writing it is still not fixed.

erikjalevik · 2019-02-22T18:13:42Z

I am working around this by creating the menu item without an accelerator and listening for the Ctrl+Z key event in the renderer. This works. However, how can I now get the "Ctrl+Z" shortcut to show up next to "Undo" in the menu?

Arkellys · 2022-03-14T08:10:16Z

I am working around this by creating the menu item without an accelerator and listening for the Ctrl+Z key event in the renderer. This works. However, how can I now get the "Ctrl+Z" shortcut to show up next to "Undo" in the menu?

You can detect if an event comes from the accelerator with event.triggeredByAccelerator so you can keep the accelerator (so it shows up in the menu item) and cancel the action if the call comes from it.

zcbenz closed this as completed Dec 4, 2015

zeke mentioned this issue Aug 31, 2016

Different undo behaviour when using accelerate key between Windows and Mac. #7040

Closed

niik mentioned this issue Jun 11, 2019

Fix select all keyboard shortcut in lists on Windows desktop/desktop#7767

Merged

This was referenced Aug 10, 2020

Keyboard shortcuts and menu entries for undo don't work in decision table camunda/camunda-modeler#1843

Closed

fix(dmn-edit-menu): handle undo and redo entries without default camunda/camunda-modeler#1911

Merged

ThomasHalwax mentioned this issue Jun 3, 2021

MS Windows only: shortcuts aren't working in v0.10.0 syncpoint/ODIN#414

Open

danielgarthur mentioned this issue Apr 2, 2024

Keyboard shortcuts not working on macOS neanes/neanes#557

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

input element removed from the DOM consumes ^Z until its undo stack is empty #3682

input element removed from the DOM consumes ^Z until its undo stack is empty #3682

DanielDignam commented Dec 3, 2015

zcbenz commented Dec 4, 2015

evgenykochetkov commented Nov 14, 2018 •

edited

erikjalevik commented Feb 22, 2019

Arkellys commented Mar 14, 2022

input element removed from the DOM consumes ^Z until its undo stack is empty #3682

input element removed from the DOM consumes ^Z until its undo stack is empty #3682

Comments

DanielDignam commented Dec 3, 2015

zcbenz commented Dec 4, 2015

evgenykochetkov commented Nov 14, 2018 • edited

erikjalevik commented Feb 22, 2019

Arkellys commented Mar 14, 2022

evgenykochetkov commented Nov 14, 2018 •

edited