Call Activity Propagation data marker does not update

[marstamm]

Describe the bug

Steps to reproduce

1. Create a Call activity in C8
2. Toggle on Input or Output propagation
3. Toggle off again
4. The Group data marker is still there

Expected behavior

The data marker is removed when I toggle propagation off.

Environment

Camunda Modeler system information

• Version: 5.15.0-dev
• Operating System: Linux x86_64 amd64
• Execution Platform: BPMN - Camunda Platform 8

#3814

Additional context

The data marker is updated when another property in the zeebe:calledElement is updated, e.g. other Propagation or called element ID

[smbea]

The useEffect that checks for entry changes is triggered before the checkbox is actually checked. If we check the toggle value a few milliseconds later, then we would obtain the true value. This is also why the value is corrected after a re-render (caused by other entries).

I'm still not sure why it's not behaving as expected. What I can imagine is the useEffect is triggered by the setValue and getting the new value from the DOM before the actual re-render has happened:

Toggle level: user input -> set checkbox value -> checkbox is rendered accordingly
Group level:                                   ->`useEffect` is triggered -> get value via `domQuery`

[smbea]

Findings from looking at this with @barmac:

• The marker is updated based on the DOM at the time of the entries changed
• The DOM of the toggle switch is changed after useEffect has run
• isEdited doesn't depend on DOM entries but variable entries

[barmac]

One idea: use MutationObserver to dispatch marker updates instead of useEffect.

[barmac]

We cannot use :has because it's not supported in FireFox.

[barmac]

Workaround sketch: bpmn-io/properties-panel@3f9f598

[smbea]

I propose we go with the workaround for now. In the future (or if more issues like this one come up), we should consider refactoring the way we check/update if entries are edited.

This could include making entries more aware and having their own isEdited method, as opposed to it being a separate utility function. This way, it always checks the actual input value:

class ToggleSwitch {
  isEdited() {
    return !!this.state.checked
  }
}