Values override each other when editing in property panel and using the same binding for two different properties

Describe the Bug

When using the same binding for two properties, the values alternatively override each other. Please see recording below (and steps to reproduce in the next section):

https://user-images.githubusercontent.com/25924333/190327518-e92a1df4-b135-4927-a555-d951c72ed5b9.mov

The issue was originally opened in the Web Modeler repository, please see: https://github.com/camunda/web-modeler/issues/2353.

Steps to Reproduce

• dynamic template
• conditional property exists (e.g., dropdown)
• dependent values are both
• • FEEL supporting (either "feel": "required" or "feel": "optional")
• • dependent values have the same binding -> name.

The minimal reproducible template:

{
  "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
  "name": "GDrive",
  "id": "e6e6277b-190f-4f31-8acd-e42fbe2f6848",
  "description": "Create folder or a file from template",
  "category": {
    "id": "connectors",
    "name": "Connectors"
  },
  "appliesTo": [
    "bpmn:ServiceTask"
  ],
  "groups": [
    {
      "id": "operationDetails",
      "label": "Operation Details"
    }
  ],
  "properties": [
    {
      "type": "Hidden",
      "value": "io.camunda:google-drive:1",
      "binding": {
        "type": "zeebe:taskDefinition:type"
      }
    },
    {
      "id": "resourceType",
      "group": "operationDetails",
      "type": "Dropdown",
      "value": "folder",
      "choices": [
        {
          "name": "Create Folder",
          "value": "folder"
        },
        {
          "name": "Create File from template",
          "value": "file"
        }
      ],
      "binding": {
        "type": "zeebe:input",
        "name": "resource.type",
        "key": "resource.type"
      }
    },
    {
      "label": "File name",
      "description": "Enter name for your file",
      "group": "operationDetails",
      "feel": "required",
      "type": "String",
      "binding": {
        "type": "zeebe:input",
        "name": "resource.name"
      },
      "constraints": {
        "notEmpty": true,
        "maxLength": 255
      },
      "condition": {
        "property": "resourceType",
        "equals": "file"
      }
    },
    {
      "label": "Folder name",
      "description": "Enter name for your folder",
      "group": "operationDetails",
      "feel": "required",
      "type": "String",
      "binding": {
        "type": "zeebe:input",
        "name": "resource.name"
      },
      "constraints": {
        "notEmpty": true,
        "maxLength": 255
      },
      "condition": {
        "property": "resourceType",
        "equals": "folder"
      }
    }
  ],
  "icon": {
    "contents": "data:image/svg+xml;utf8,%3Csvg width='18' height='18' viewBox='0 0 87.3 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z' fill='%230066da'/%3E%3Cpath d='m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z' fill='%2300ac47'/%3E%3Cpath d='m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z' fill='%23ea4335'/%3E%3Cpath d='m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z' fill='%2300832d'/%3E%3Cpath d='m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z' fill='%232684fc'/%3E%3Cpath d='m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z' fill='%23ffba00'/%3E%3C/svg%3E"
  }
}

Expected Behavior

Environment

• Host (Browser/Node version), if applicable: all browsers
• OS: all
• Library version: "camunda-bpmn-js": "0.17.2", "bpmn-js-properties-panel": "1.6.1"

[marstamm]

Is this expected that we support two properties for the same binding?

I would expect so. As long as the condition is unique, I would expect the properties to work as if there is only a single one defined

[marstamm]

Please disregard my last comment, I figured it out:

I checked the original issue an can replicate it when using the “Append anything” menu and can confirm that elementTemplates.createElement creates the extensionElements with 2 "resource.name" mappings.