ukrbublik/react-awesome-query-builder

nop renderField usage with MuiFieldSelect results in typescript error

Closed this issue · 4 comments

Describe the bug
Based on this example, I thought it would be possible to do something like this:

import type {Config} from '@react-awesome-query-builder/mui'; // for TS example
import {MuiWidgets} from '@react-awesome-query-builder/mui';
import {MuiConfig} from '@react-awesome-query-builder/mui';
import React from 'react';

const {MuiFieldSelect} = MuiWidgets;

const config: Config = {
    ...MuiConfig,
    settings: {
        renderField: (props) => <MuiFieldSelect {...props} />,
    },
}

But I get a TS error on MuiFieldSelect:

TS2322: Type '{ key?: Key | null | undefined; items?: FieldItems | undefined; setField?: ((fieldPath: string) => void) | undefined; selectedKey?: string | Empty; selectedKeys?: string[] | Empty; ... 10 more ...; groupId?: string | undefined; }' is not assignable to type 'FieldProps<Config>'.   Types of property 'items' are incompatible.     Type 'FieldItems | undefined' is not assignable to type 'FieldItems'.       Type 'undefined' is not assignable to type 'FieldItem[]'

Additional context
If the MUI package uses the MuiFieldSelect component, shouldn't this work?

Can't reproduce your type issue.
Do you use version 6.2.0?
You need to extend settings from MuiConfig.settings:

    settings: {
      ...MuiConfig.settings,
        renderField: (props) => <MuiFieldSelect {...props} />,
    },

Do you see same error after this fix?

Yes, using version v6.2.0. Same error after spreading settings. Here is my tsconfig.json. You can clone that whole repo and yarn install + start and should get the same error.

Got it. The reason is strictNullChecks: true (which is by default).

Fixed in 6.3.0