Disable Value dropdown some attribute based on the condition

[ThevinMalaka]

Hey, there!
Thanks for the awesome library !!!

Question:

I want to disable some value dropdown value based on the condition.
In this code sample, I want to disable Chain 2 based on some conditions. Is have any solution for it?

fields.ts

import type { Field, RuleType } from "react-querybuilder";


const chianList: OptionGroup[] = [
  {
    label: "Chain List",
    chains: ["Any", "Chain 1", "Chain 2", "Chain 3", "Chain 4"],
  },
].map(({ label, chains }) => ({
  label,
  options: chains.map((s) => ({ name: s, label: s })),
}));

export const fieldsList: Field[] = [
  {
    name: "chain",
    label: "Chain",
    valueEditorType: "select",
    values: chianList,
    defaultValue: "Any",
    operators: [{ name: "=", label: "is" }],
  }
];

index.tsx

const initialQuery: any = {
  combinator: "and",
  rules: [
    {
      id: "rule1",
      field: "chain",
      operator: "=",
      value: "Any",
    },
 ],
};

  const [query, setQuery] = useState<any>(initialQuery);

  <QueryBuilderAntD>
    <QueryBuilder
      fields={fieldsList}
      query={query}
      showCombinatorsBetweenRules
      onQueryChange={setQuery}
    />
  </QueryBuilderAntD>

Screenshot

[jakeboone02]

As it is you'd need to use a custom value editor to render certain <option>s as disabled based on whatever condition.

That might be a good feature to add to the library, though. I'll think about it.

[ThevinMalaka]

@jakeboone02 Amazing, thank you.

[jakeboone02]

Value selectors will respect the disabled property of individual options in option lists in v7 (and I'll release v7.0.0-alpha.6 including this feature soon). See #638.