I have a simple task, I have 2 dropdowns. When I select A in one, I

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Recursive calculation causing input problems about formengine HOT 2 CLOSED

Sarim-Sohail commented on July 29, 2024

Recursive calculation causing input problems

from formengine.

Comments (2)

optimajet commented on July 29, 2024

@Sarim-Sohail

When initially setting the value of the first dropdown to A, the second one becomes B. When modifying the second dropdown to either A or B, it works as expected.

You have been created a cyclic dependency, which of course will cause the data to change ad infinitum.

You can define an action with parameters, and then define arguments when linking actions:

Example:

{
  "version": "1",
  "actions": {
    "modifyAnotherDropdown": {
      "body": "  const value = e.args[0]\n  if (value === 'a') {\n    e.data[args.destKey] = 'b'\n  }\n  if (value === 'b') {\n    e.data[args.destKey] = 'a'\n  }",
      "params": {
        "sourceKey": "string",
        "destKey": "string"
      }
    }
  },
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "dd1",
        "type": "RsDropdown",
        "props": {
          "value": {
            "fnSource": "  console.log(\"DD1\", form.data);\n  if(form.data.dd2 === \"a\" )\n  {\n    return \"b\";\n  }\n  else if (form.data.dd2 === \"b\" )\n  {\n    return \"a\";\n  }\n  else \n  {\n    return form.data.dd1;\n  }"
          },
          "data": {
            "value": [
              {
                "value": "a",
                "label": "A"
              },
              {
                "value": "b",
                "label": "B"
              }
            ]
          }
        },
        "events": {
          "onSelect": [],
          "onChange": [
            {
              "name": "modifyAnotherDropdown",
              "type": "code",
              "args": {
                "sourceKey": "dd1",
                "destKey": "dd2"
              }
            }
          ]
        }
      },
      {
        "key": "dd2",
        "type": "RsDropdown",
        "props": {
          "value": {
            "fnSource": "  console.log(\"DD2\", form.data);\n\n  if(form.data.dd1 === \"a\" )\n  {\n    return \"b\";\n  }\n  else if (form.data.dd1 === \"b\" )\n  {\n    return \"a\";\n  }\n  else \n  {\n    return form.data.dd2;\n  }\n"
          },
          "data": {
            "value": [
              {
                "value": "a",
                "label": "A"
              },
              {
                "value": "b",
                "label": "B"
              }
            ]
          },
          "readOnly": {
            "computeType": "function",
            "fnSource": " ",
            "value": false
          }
        },
        "events": {
          "onChange": [
            {
              "name": "modifyAnotherDropdown",
              "type": "code",
              "args": {
                "sourceKey": "dd2",
                "destKey": "dd1"
              }
            }
          ],
          "onSelect": []
        }
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}