resolveProps to dynamically add options to selected based on multiple inputs.

[steverhoades]

I have a scenario where options within a select need to be filtered based on values from multiple elements. I have used the resolveProps and a function to handle this and have achieved some degree of success. The challenge I am running in to is that when the options are populated they show up in the select with checkmarks to the right and cannot be selected.

Obviously my approach is not sound here. I've gone through the underlying code and don't see an obvious way to accomplish what I'm after.

Example schema:

const schema = (store) => {
  fields: [
    {
      "component": "select",
      "label": "Permutation One",
      "name": "PermutationOne",
      "simpleValue": true,
      "initialValue": "one",
      "options": [
         {value: 'one', label: 'one'},
         {value: 'two', label: 'two'},
       ],
    },
    {
      "component": "select",
      "label": "Permutation Two",
      "name": "PermutationTwo",
      "simpleValue": true,
      "initialValue": "three",
      "options": [
         {value: 'three', label: 'three'},
         {value: 'four', label: 'four'},
       ],
    },
    {
      "component": "select",
      "label": "Service",
      "name": "ServiceOption",
      "simpleValue": true,
      "options": [],
      resolveProps: (props, {meta, input}, formOptions) => resolveServices(formOptions, store, props)
    },
  ]
}

Here is a sandbox link

So, the interesting thing is that this cannot be replicated with the codebox code. The only difference between this version and the one i'm attempting is that i'm running a newer version of @patternfly/react-core.

An example of the checkboxes i'm seeing is below.

Any tips on what I could possibly be overlooking here, or perhaps some direction on what else to try would be greatly appreciated.

[steverhoades]

As it turns out it was a logic error on my end. This resulted from having an empty value for the option. It is working as I expect it to. The next challenge is to increase the performance as there appears to be some struggling with the form, I suspect it's due to the subscription on the main form instance.

This question can be closed.

[steverhoades]

SubscribedSelect.tsx

import * as React from 'react';
import {FormSpy} from '@data-driven-forms/react-form-renderer';
import {Select} from '@data-driven-forms/pf4-component-mapper';

export default (props) => <FormSpy subscription={{ values: true }}>{() => <Select {...props} />}</FormSpy>;

This seems to have done the trick to improve performance a bit.