DMN-JS Bundling Modeler: Inability to Edit Column Properties (Name, Expression) in Decision Tables

[EricCpy]

Describe the Bug

When creating a new Decision Table, it is not possible to fill in all column names and expression names. Additionally, after editing an expression name in an existing Decision Table, it becomes impossible to edit the column name in another Decision Table.

Steps to Reproduce

First Bug:

1. Download the Example (same as the Bundling Example but using a modeler instead of a viewer).
2. Run npm install.
3. Run npm run all.
4. Create a new Decision Table.
5. Fill in the first column name and expression.
6. Attempt to fill in the second column name and expression - it doesn't work.

Second Bug:

1. Follow steps 1-3 as above.
2. Open an existing Decision Table and edit a column expression.
3. Open another Decision Table and try to edit a column name - it doesn't work.

Expected Behavior

It should be possible to fill in all column names and expressions before creating the first row. Additionally, editing a column expression in one Decision Table should not prevent editing column names in other Decision Tables.

Environment

• NodeJS: 20.15.1 (with NODE_OPTIONS=--openssl-legacy-provider)
• Browser:
  • Working: Firefox 128
  • Not Working: Chrome 126.0.6478.183, Microsoft Edge 126.0.2592.102
• OS: Windows 10, macOS 14
• Library version: {"dmn-js": "16.6.1"}

[barmac]

I cannot reproduce this issue. Did you double-click the table header?

https://github.com/user-attachments/assets/c972ecaa-fe58-43ae-8661-cfad15a5a3d7

[EricCpy]

Could you please try the following steps in this order:

1. Open Decision Table
2. Fill in the column name/label
3. Fill in the column expression
4. Try to fill in the other column names

If I follow your order and fill in the expression first instead of the name, it works for me too.

[barmac]

OK I can reproduce it. Output is not editable again after the exact steps you wrote.

https://github.com/user-attachments/assets/cd6d58ea-9443-4bac-ab63-3bc4a88a093f

Can you reproduce it on https://demo.bpmn.io/dmn?

[barmac]

I cannot reproduce it on demo.bpmn.io.

[EricCpy]

No, I cannot reproduce the issue in any of your online examples.

[barmac]

Can you reproduce it when you run npm start in dmn-js repository? I cannot.

[EricCpy]

I cannot reproduce it when I run npm start in the dmn-js repository.

[barmac]

I rebuilt the bundling example with modeler, and so far this is the only setup in which I can reproduce this issue: https://github.com/bpmn-io/dmn-js-examples/pull/30

[barmac]

@jarekdanielak to have a look

[jarekdanielak]

I can reproduce the problem in EricCpy/DMN-JS-Bundled and https://github.com/bpmn-io/dmn-js-examples/pull/30.

The problem occurs when you close the Context Menu when Expression field is focused.

In the video below, I cannot change value of season. Temporary workaround is to unfocus the Expression field before closing the Context Menu. That's why this bug only occurs when you edit column name first and expression second, not the other way around.

https://github.com/user-attachments/assets/bdaa3c03-d766-4917-b98d-970f1e4e4b14

---

By the way, you won't have to use NODE_OPTIONS=--openssl-legacy-provider if you update webpack to the latest version. I updated it for the dmn-js-examples in https://github.com/bpmn-io/dmn-js-examples/pull/31.

[jarekdanielak]

@EricCpy the issue seems to be buried somewhere in the dependencies of dmn-js. If you want to continue debugging, I can suggest to start with ContentEditable from bpmn-io/dmn-js and FeelEditor from bpmn-io/feel-editor.

Everything works fine with the pre-packaged version of dmn-js Modeler.

I will move this issue into the backlog and leave it open in case anybody comes back with a similar problem or a solution.

[EricCpy]

Working with dmn-js 16.7.0 and Chrome version 128.0.6613.114.