Content editable div inside a parent div that has a mousedown event on it cannot be edited in Aurelia

[Jody-Six]

I'm submitting a bug report

• Library Version: "aurelia-bootstrapper": "2.3.3",

Please tell us about your environment:

• Operating System: OSX 10.0.19042

• Node Version: v12.22.8

• NPM Version: 6.14.15

• Aurelia CLI OR JSPM OR Webpack AND Version Local aurelia-cli v2.0.3

• Browser: Chrome Version 97.0.4692.71 (Official Build) (64-bit)

• Language: TypeScript and ESNext

Current behavior: I have a content editable div inside a parent div that has a mousedown event on it. I cannot edit the content of my inner div. However, with vanilla JavaScript that is not in Aurelia, I can. It appears to be a bug with Aurelia?

Expected/desired behavior:

I need to be able to edit the contents of my content editable div. Is this possible or not with Aurelia? It is possible with vanilla JavaScript that is not in Aurelia.

My Gist is here: https://gist.run/?id=79a29ab5284db1976cf75442809b5592

What is the motivation / use case for changing the behavior? I can do this with JavaScript that is not in Aurelia. I need to be able to do this in my Aurelia app.

Thank you

[Alexander-Taran]

@Jody-six

https://aurelia.io/docs/binding/basics#dom-events Aurelia will automatically call preventDefault() on events handled with delegate or trigger binding. Most of the time this is the behavior you want. To turn this off, return true from your event handler function.

you can return true from your mouse down handler or change delegate to trigger