Customising AntD Value Select Searching

[A-EbrahimRSA]

I've recently encountered an issue where I've noticed that when using the AntD styling library and using fields in a specific manner results in unintended behaviour of the search operations.

Taking the below example where I have a field of country which will display country names as labels within the multiselect.

{
    name: 'country_id',
    label: 'Country',
    operators: 'in',
    valueEditorType: multiselect,
    values: countries!.sort((a, b) => a.countryName!.localeCompare(b.countryName!)).map(c => ({ name: c.id.toString(), label: c.countryName! }))
},

When trying to search the AntD dropdown for a desired country things go awry. This is due to the underlying default behaviour of the Ant Design Select component. By default it searches by value and not by label, which I think is a little unintuitive and silly.

However it does provide some ways of overriding this default behaviour such as providing a value for the following props of the Select component.

• filterOption
• optionFilterProp

My current work around is to create a custom Value Selector and then provide the above properties to indicate that the label should be used for filtering and not the value. I have just used the actual implementation of AntDValueSelector in RQB as a skeleton to work off for now. https://github.com/react-querybuilder/react-querybuilder/blob/main/packages/antd/src/AntDValueSelector.tsx

import { Select } from 'antd';
import React, { ComponentPropsWithoutRef } from 'react';
import { useValueSelector, toOptions, VersatileSelectorProps } from 'react-querybuilder';

type AntDValueSelectorProps = VersatileSelectorProps &
  Omit<ComponentPropsWithoutRef<typeof Select>, 'onChange' | 'defaultValue'>;

export const CustomAntDValueSelector = ({
    className,
    handleOnChange,
    options,
    value,
    title,
    disabled,
    multiple,
    listsAsArrays,
    // Props that should not be in extraProps
    testID: _testID,
    rule: _rule,
    rules: _rules,
    level: _level,
    path: _path,
    context: _context,
    validation: _validation,
    operator: _operator,
    field: _field,
    fieldData: _fieldData,
    schema: _schema,
    ...extraProps
}: AntDValueSelectorProps): React.JSX.Element => {
    const { onChange, val } = useValueSelector({
        handleOnChange, listsAsArrays, multiple, value
    });

    const modeObj = multiple ? { mode: 'multiple' as const } : {};

    return (
        <span title={title} className={className}>
            <Select
                {...modeObj}
                popupMatchSelectWidth={false}
                disabled={disabled}
                value={val}
                onChange={onChange}
                optionFilterProp='label'
                {...extraProps}
            >
                {toOptions(options)}
            </Select>
        </span>
    );
};

In a generic sense would it be possible to allow for pass through of props from the styling components i.e. AntDValueSelector, AntDValueEditor, etc.. to the underlying component.

So props for AntDValueSelector would be: AntDValueSelect as well as . I understand that there is definitely going to be some conflict regarding prop name conflicts, but this would allow for each styling library to effectively expose all its internal prop options without needing to completely

As I was typing this I realised that the extraProps field is exactly that. My custom value selector now looks as below.

const CustomValueSelector = (props: ValueEditorProps) => (
    <AntDValueEditor {...props} selectorComponent={selectorProps => <AntDValueSelector {...selectorProps} showSearch optionFilterProp='label' />} />
);

#304 Is the MR that addresses this issue. Nice work

[jakeboone02]

You can also replace all value selectors, including the ones used by the value editor component, with the controlElements.valueSelector prop:

const CustomValueSelector = (props: ValueSelectorProps) => (
  <AntDValueSelector {...props} showSearch optionFilterProp='label' />
);

export const App = () => {
  return (
    <QueryBuilder controlElements={{ valueSelector: CustomValueSelector }} />
  );
}

valueEditor is the only component that uses the extraProps prop because it generates different library components depending on the editor type. The other controlElements components can take the props for their underlying library components directly (as you've demonstrated with AntDValueSelector).

[A-EbrahimRSA]

Thanks for this but after digging further I've discovered the above doesn't work.
I've got a solution that works and I'm a little interested in actually contributing to the repo with a fix.

The actual issue with the above is that the old way in which RQB does the Option creation. The current way creates the components within the JSX which means you can't filter against props like label. The current way in the below file only adds key and value props to the Option component in the Ant Select Option component. When providing the optionFilterProp='label' field it will then look for the corresponding label field and as a result fail since its never created.

https://github.com/react-querybuilder/react-querybuilder/blob/main/packages/antd/src/utils.tsx#L10

The future way to create options:
https://ant.design/components/select#usage-upgrade-after-5110

I'm going to close up shop for today but tomorrow I'll try my hand at creating a PR and seeing what all that entails.

Also I'm stuck on React16 until our infrastructure team can finalise our React 18 upgrade. So unfortunately the controlElements valueSelector is out of scope for me for awhile :(

[jakeboone02]

Thanks so much for doing that research! After a quick glance, I'm inclined to bump the minimum supported antd version to >=5.11.0 in a minor RQB release. It's already >=5, and 5.11.0 was released over a year ago. That would allow us to migrate to the options prop.

Looking forward to seeing your PR. I'll hold off doing anything about this issue until then.