Backspace doesn't bubble to document

[remco-pc]

Describe the bug

I have an input attached to the document. With addEventListener with type keydown, i try to catch keyboard events. When the ace editor is open and loaded, the backspace event isnt captured anymore, before it was open and loaded it worked fine.

Expected Behavior

Backspace keydown event should bubble.

Current Behavior

Event.stopPropagation is probably used

Reproduction Steps

None

Possible Solution

No response

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

Current

[whazor]

I cannot reproduce this issue.

The steps I did:

1. open https://ace.c9.io/build/kitchen-sink.html
2. add document.addEventListener("keydown", (e) => { console.log(e) }) into web dev console
3. edit in ace editor
4. exit ace editor focus by clicking on side bar
5. press backspace and it results in keydown { target: body.show-text-input, key: "Backspace", charCode: 0, keyCode: 8 }

Please share reproduction code and steps, which browser, and the exact Ace version that you are using.

[nightwing]

This is an intentional behavior, editor stops propagation of events that it have handled. This is useful if there is another event handler on the page that would want to do something only for events that are not handled by the editor. If one needs to intercept all events, one can use capturing event handler on the document.

I can see how this design choice can be inconvenient for some usecases, but changing this now would be a breaking change to the editor api.

[remco-pc]

I am designing a cms / desktop environment, which utilises a global keyboard, and an app specific keyboard, in this case ace editor. I want to extend some capabilities like shift / ctrl backspace, to delete a whole word / sentence. Because of the stopPropagation probably i am now not able todo so. Can this not be a configuration option ?

[whazor]

I don't think I understand what you mean with global vs app specific keyboard?

However, if you want to change the keyboard commands from Ace, there are already ways to do so. Extending the keyboard commands from Ace can be done by Ace Commands, for example for deleting previous word already is the command:

{
    name: "removewordleft",
    description: "Remove word left",
    bindKey:  {win: "Ctrl-Backspace", mac: "Alt-Backspace|Ctrl-Alt-Backspace"},
    exec: function(editor) { editor.removeWordLeft(); },
    multiSelectAction: "forEach",
    scrollIntoView: "cursor"
}

You can customize your commands via CommandManager:

const editor = ace.edit("editor")
editor.commands.removeCommand("removewordleft");
editor.commands.addCommand(
  // here your custom command
);