TextField throws error when used inside web component (and shadow dom)

[arjangeertsema]

Describe the Bug

TextField (and TextArea) throws error when input changes and the properties panel resides inside a web component.

The scope changes from shadow dom (inside handleInput method instance) to dom (inside handleInputCallback debounce method instance).

Same goes for TextArea.

Checkbox, Select and FEEL editor work as expected.

Steps to Reproduce

Create web component with code inside:

import BaseModeler from 'camunda-bpmn-js/lib/base/Modeler';
import ModelerStyle from "camunda-bpmn-js/dist/assets/base-modeler.css";

const modeler = new BaseModeler({
      container: this.renderRoot.querySelector('#canvas') as HTMLElement,
      propertiesPanel: {
        parent: this.renderRoot.querySelector('#properties') as HTMLElement  
      }
});

await modeler.createDiagram();

And then change the name of the process.

Expected Behavior

Exception: TypeError: Cannot read properties of undefined (reading 'length')

Target here is the web component in the dom instead of the input in the shadow dom.

Inside this method e has the right context and e.target equals the input instance

Environment

• Host (Browser/Node version), if applicable: Brave 1.60.125 and node v18.17.1
• macOS Sonoma 14.1.1
• Library version: 3.13.0

[nikku]

Thanks for opening this issue.

We'll see when we have the time to reproduce and fix it. Contributions (even a code sandbox or the like) welcome!

[arjangeertsema]

@nikku this is by design:

The idea behind shadow tree is to encapsulate internal implementation details of a component.

Let’s say, a click event happens inside a shadow DOM of component. But scripts in the main document have no idea about the shadow DOM internals, especially if the component comes from a 3rd-party library.

So, to keep the details encapsulated, the browser retargets the event.

https://javascript.info/shadow-dom-events

To be shadow dom save event should not be passed to debounce function (because of setTimeout, the browser will retarget the event). A quick fix would be to pass e.target instead.

Shall I create a pull request for this bug?