FieldCascader issue

[shivamChopraCodes]

I had started using react awesome query builder antd in a projetct. since v6.1.1. Below shown code was working perfectly fine till recently.

import React, { useState, useEffect, ReactPropTypes } from 'react';
import axios from '../../Config/Axios';
import '@react-awesome-query-builder/ui/css/styles.css';
import { Modal, Button, ModalHeader, Text, ModalBody, ModalFooter, Row, Loader } from 'src/coreComponents';
import {
  AntdConfig,
  AntdWidgets,
  Utils as QbUtils,
  Query,
  Builder,
  BasicConfig,
  JsonTree,
} from '@react-awesome-query-builder/antd';
import './styles.css';
import { EntityFields } from './types';
interface QueryBuilderProps {
  fields: EntityFields;
  onQuery: (query: string) => void;
  jsonTree?: JsonTree;
  saveJsonTree: (jsonTree: JsonTree) => void;
  rebuildBuilder?: boolean;
}
// or import '@react-awesome-query-builder/ui/css/compact_styles.css';
const InitialConfig = AntdConfig;
const queryValue: any = { id: QbUtils.uuid(), type: 'group' };
const config: BasicConfig = {
  ...InitialConfig,
  settings: {
    ...InitialConfig.settings,
    renderField: (props: any) => <AntdWidgets.FieldCascader {...props} />,
    fieldSources: ['field', 'func'],
  },
};
const renderBuilder = (props: any) => (
  <div className='query-builder-container' style={{ padding: '10px' }}>
    <div className='query-builder qb-lite'>
      <Builder {...props} />
    </div>
  </div>
);
const columnTypes: { [key: string]: string } = {
  bigint: 'number',
  bit: 'boolean',
  datetime: 'datetime',
  decimal: 'number',
  nvarchar: 'text',
  'nvarchar(250)': 'text',
  uniqueidentifier: 'text',
};

const QueryBuilder = ({ fields, jsonTree, onQuery, saveJsonTree, rebuildBuilder }: QueryBuilderProps) => {
  const [fieldsData, setFieldsData] = useState({ ...config });

  useEffect(() => {
    const queryFields = Object.entries(fields).reduce(
      (result, [entityTableName, data]) => ({
        ...result,
        [`[${entityTableName}]`]: {
          label: data.entityName,
          type: '!struct',
          subfields: data.fields.reduce(
            (result, field) => ({
              ...result,
              [`[${field.fieldName}]`]: {
                type: columnTypes[field.controlType.toLowerCase()],
                label: field.displayName,
                // fieldSettings: field.fieldSettings || {},
              },
            }),
            {}
          ),
        },
      }),
      {}
    );
    setFieldsData((prev: any) => ({ ...prev, fields: { ...queryFields } }));
  }, [fields]);
  useEffect(() => {
    setFstate({
      tree: QbUtils.checkTree(QbUtils.loadTree(jsonTree || queryValue), fieldsData),
      config: fieldsData,
    });
  }, [fieldsData, rebuildBuilder]);
  const [fstate, setFstate] = useState({
    tree: QbUtils.checkTree(QbUtils.loadTree(jsonTree || queryValue), fieldsData),
    config: fieldsData,
  });
  const onChange = (immutableTree: any, config: any) => {
    // Tip: for better performance you can apply `throttle` - see `examples/demo`
    // setFstate({tree: immutableTree, config: config});

    const str = QbUtils.sqlFormat(immutableTree, config) || '';
    onQuery(str);
    const jsonTree = QbUtils.getTree(immutableTree);
    saveJsonTree(jsonTree);
    console.log(jsonTree);
    // `jsonTree` can be saved to backend, and later loaded to `queryValue`
  };

  return (
    <div className='query-wrapper'>
      {fieldsData.fields && (
        <Query {...fieldsData} value={fstate.tree} onChange={onChange} renderBuilder={renderBuilder} />
      )}
    </div>
  );
};
export default QueryBuilder;

In a nut shell I am assigning fields under each entity in a config. Only ANTD cascader was added in settings on top of basic config and fields.

But now I am seeing below warning in console whenever I select a field in cascader and neither inputs to select operator nor value input shows up.

I am not sure if some custom setting is to be added as LHS config.

EDIT: Github code block messed up my code snippet. Formatted snipped can be accessed by this link.

[ukrbublik]

Thanks for the bug report.
There is a bug with FieldCascader.
As a workaround, you can use FieldTreeSelect or default FieldSelect

Btw you can use ``` to wrap your code snippet