f-form-builder: Select input with ability to create new options and a custom async validator nehaves incorrectly

[gammaSpeck]

Bug description

When using an async validator to determine if validity is true or false, for newly created options, the option list gets appended BEFORE the return of the async validator to determine the validity.

Expected behaviour

When creating new options, and a custom async validator is present, the list of options should get appended AFTER the validation is true.

Video

Screen.Recording.2023-10-13.at.7.01.01.PM.mov

Fields passed to form builder:

{
  "type": "object",
  "direction": "vertical",
  "fields": {
    "domain": {
      "label": { "title": "Domain" },
      "type": "select",
      "searchable": true,
      "placeholder": "Select Domain",
      "validationRules": [{ "name": "required" }],
      "options": [
        {
          "title": "UX design",
          "data": {
            "name": "ux_design",
            "key": "cef7e730-f50c-4a2d-9827-db9adc2b1da0://ux_design",
            "schemas": [
              { "key": "athena://awsdatacatalog.dataset9", "name": "dataset9" },
              { "key": "athena://awsdatacatalog.dataset7", "name": "dataset7" },
              {
                "key": "athena://awsdatacatalog.dataset_6",
                "name": "dataset_6"
              },
              {
                "key": "athena://awsdatacatalog.dataset_5",
                "name": "dataset_5"
              },
              {
                "key": "athena://awsdatacatalog.dataset_3",
                "name": "dataset_3"
              },
              {
                "key": "athena://awsdatacatalog.new_dataset",
                "name": "new_dataset"
              },
              { "key": "athena://awsdatacatalog.datetime", "name": "datetime" },
              {
                "key": "snowflake://ingestionteam.datetime",
                "name": "datetime"
              }
            ],
            "display_name": "UX design"
          }
        }
      ],
      "optionTemplate": {
        "_custom": {
          "type": "function",
          "display": "<span style=\"opacity:.5;\">function</span> optionTemplate(option)",
          "tooltip": "<pre>function(option) {\n        option = option;\n        const dom = option.data;\n        const isDo = userOwnedDomains.value.some((ownedDom) => ownedDom.key === dom.key);\n        const htmlStr = isDo ? html`<f-div align=\"middle-left\" gap=\"x-small\">\n\t\t\t\t\t<f-text weight=\"medium\" inline> ${dom.display_name} </f-text>\n\t\t\t\t\t<f-icon source=\"i-crown\" />\n\t\t\t  </f-div>` : html`<f-div align=\"middle-left\" gap=\"x-small\">\n\t\t\t\t\t<f-text weight=\"medium\" inline> ${dom.display_name} </f-text>\n\t\t\t  </f-div>`;\n        return htmlStr;\n      }</pre>",
          "_reviveId": 94
        }
      }
    },
    "dataset": {
      "label": { "title": "Dataset" },
      "type": "select",
      "searchable": true,
      "loading": false,
      "createOption": true,
      "placeholder": "Enter your dataset name",
      "options": [
        "dataset9",
        "dataset7",
        "dataset_6",
        "dataset_5",
        "dataset_3",
        "new_dataset",
        "datetime",
        "datetime"
      ],
      "validationRules": [
        { "name": "required" },
        {
          "name": "custom",
          "validate": {
            "_custom": {
              "type": "function",
              "display": "<span style=\"opacity:.5;\">function</span> customValidator(datasetName, _)",
              "tooltip": "<pre>async function(datasetName, _) {\n      const domainName = formValues.value.domain?.data.name;\n      const destId = selectedDest.value?.destination_id;\n      if (!domainName || !destId || !datasetName || typeof datasetName !== \"string\")\n        return true;\n      debugger;\n      if (datasets.value.includes(datasetName))\n        return true;\n      const validity = await pipelineCreateStore.VALIDATE_DATASET_NAME({\n        datasetName,\n        domainName,\n        destId\n      });\n      datasetValidity.isValid = validity.is_name_allowed;\n      datasetValidity.msg = validity.message ?? \"\";\n      return datasetValidity.isValid;\n    }</pre>",
              "_reviveId": 95
            }
          },
          "message": ""
        },
        {
          "name": "regex",
          "params": { "regex": "[native RegExp /^(?![0-9])[\\w\\s]+$/]" },
          "message": "Dataset name cannot begin with a number"
        }
      ],
      "clear": true
    }
  }
}

Custom async validator

const customValidator: FormBuilderAsyncValidatorFunction = async function (datasetName, _) {
	const domainName = formValues.value.domain?.data.name;
	const destId = selectedDest.value?.destination_id;

	if (!domainName || !destId || !datasetName || typeof datasetName !== "string") return true;
	debugger;
	if (datasets.value.includes(datasetName)) return true;

	const validity = await pipelineCreateStore.VALIDATE_DATASET_NAME({
		datasetName,
		domainName,
		destId
	});

	datasetValidity.isValid = validity.is_name_allowed;
	datasetValidity.msg = validity.message ?? "";
	return datasetValidity.isValid;
};

Reproducible example: flow2-vue-starter-kit

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

[vikas-cldcvr]

@gammaSpeck validation module is built on top of formbuilder and create option is a feature of f-select. Hence we can't validate option before adding to f-select.

However we are happy to provide solution if you provide sandbox.

[vikas-cldcvr]

We can't add validation in between different modules, but there is a duplication API call for the first time for async validator, I will check that in a different ticket

[vikas-cldcvr]

Ticket to track for duplicate API calls

#163