MuiAutocomplete - convert value to Array so it can be rendered when j…

[ivanbarlog]

…son logic is imported back to the component

[ukrbublik]

@ivanbarlog Please explain what issue this PR is trying to fix.
For multiple autocomplete value should be already Array. For single autocomplete value should not be an Array

[ivanbarlog]

Hi @ukrbublik,

I am using following function spec:

const listValues = [
    { title: 'A', value: 1 },
    { title: 'B', value: 2 },
    { title: 'C', value: 3 }
];

const config = {
    ...MuiConfig,
    funcs: {
        percentOfMultiselect: {
        label: '% of',
        jsonLogic: ({ value, percent }) => {
          return { percentOfMultiselect: [value, percent] };
        },
        jsonLogicImport: ({ percentOfMultiselect }) => {
          return percentOfMultiselect;
        },
        returnType: 'number',
        allowSelfNesting: false,
        args: {
          value: {
            label: 'Value',
            type: 'multiselect',
            valueSources: ['value'],
            fieldSettings: {
              listValues,
              showSearch: true
            }
          },
          percent: {
            label: 'Percent',
            type: 'number',
            valueSources: ['value'],
            fieldSettings: { min: 0, step: 0.01 }
          }
        }
      }
   }
}

When I render it and select A and C for instance it looks like following figure.

But then when I persist it to the database and try to hydrate it back the fields are selected in the dropdown list but are not rendered in MuiAutocomplete.

When I apply hotfix it looks like it should as depicted in following figure.

I am then parsing the JSON from database like this (simplified version without the checks):

const parsed = JSON.parse(stringifiedValueFromDb);
const logic = QbUtils.loadFromJsonLogic(parsed, config);

// I am using this in my React state
const tree = QbUtils.checkTree(logic, config)

Here is the value of stringifiedValueFromDb (formatted):

{
  "and": [
    {
      "==": [
        {
          "percentOfMultiselect": [
            [
              1,
              3
            ],
            10
          ]
        },
        30
      ]
    }
  ]
}

Also here is stringified value of logic value:

{
  "type": "group",
  "id": "a99aa988-4567-489a-bcde-f18b753b0909",
  "children1": {
    "b89a9bb8-89ab-4cde-b012-318b753b0909": {
      "type": "rule",
      "id": "b89a9bb8-89ab-4cde-b012-318b753b0909",
      "properties": {
        "field": {
          "func": "percentOfMultiselect",
          "args": {
            "value": {
              "valueSrc": "value",
              "value": [
                1,
                3
              ],
              "valueType": "multiselect"
            },
            "percent": {
              "valueSrc": "value",
              "value": 10,
              "valueType": "number"
            }
          }
        },
        "fieldSrc": "func",
        "operator": "equal",
        "value": [
          30
        ],
        "valueSrc": [
          "value"
        ],
        "valueType": [
          "number"
        ]
      }
    }
  },
  "properties": {
    "conjunction": "AND",
    "not": false
  }
}

Am I doing something wrong?

When I add console.log(selectedValue, typeof selectedValue); to the patch this is what I get:

So it seems that MuiAutocomplete does not provide values as array but rather an object. That's why I've done Array.from(selectedValue).

[ukrbublik]

@ivanbarlog
Thanks for the detailed explanation!
Now I get it, the issue is using multiselect as a function argument.
I need to fix this issue at the import level (object you see is an Immutable object, but it should be Array).

[ukrbublik]

Closing in favour of #997 with more comprehensive fix
Thanks for issue report and PR