Custom props for connectField not working when set via JSONSchema

[shashank-452]

I have a custom component created using connectField. I pass custom props to this component. The custom props are always undefined when passing them as part of JSONSchema. However the same works when the component is used via AutoField.
Referred documentation https://uniforms.tools/docs/faq/ and https://uniforms.tools/docs/tutorials-creating-custom-field/

Not Working Code:-
`import React from "react"
import Ajv, { JSONSchemaType } from "ajv";
import { JSONSchemaBridge } from "uniforms-bridge-json-schema";
import { AutoForm } from "uniforms-material";
import { connectField } from "uniforms";
import { Box, Typography } from "@material-ui/core";

export type EmployeeFieldProps = {
employeeType: string;
employeeAge: Number;
};

function Employee({ employeeType, employeeAge }: EmployeeFieldProps) {
return (

Connect Field using Json Schema

Type:
{employeeType}


Age:
{employeeAge}


);
}
export default connectField(Employee);

export const DemoJsonSchema = () => {
type FormData = {
employee: object;
};

const schema: JSONSchemaType<FormData> = {
    title: "EmployeeDetails",
    type: "object",
    properties: {
        employee: {
            type: "object",
            uniforms: {
                component: Employee,
                employeeType: "Manager",
                employeeAge: 23,
            },
        },
    },
    required: [],
};

const ajv = new Ajv({
    allErrors: true,
    useDefaults: true,
    keywords: ["uniforms", "employeeType", "employeeAge"],
});

function createValidator<T>(schema: JSONSchemaType<T>) {
    const validator = ajv.compile(schema);
    return (model: Record<string, unknown>) => {
        validator(model);
        return validator.errors?.length ? { details: validator.errors } : null;
    };
}

const schemaValidator = createValidator(schema);
const bridge = new JSONSchemaBridge(schema, schemaValidator);

const basicForm = () => {
    return <AutoForm schema={bridge} onSubmit={console.log}>
    </AutoForm >
};
return basicForm();

}`

Working Code:-
`import React from "react"
import Ajv, { JSONSchemaType } from "ajv";
import { JSONSchemaBridge } from "uniforms-bridge-json-schema";
import { AutoField, AutoForm } from "uniforms-material";
import { connectField } from "uniforms";
import { Box, Typography } from "@material-ui/core";

export type EmployeeFieldProps = {
employeeType: string;
employeeAge: Number;
};

function Employee({ employeeType, employeeAge }: EmployeeFieldProps) {
return (

Connect Field using Auto Field

Type:
{employeeType}


Age:
{employeeAge}


);
}
export default connectField(Employee);

export const DemoAutoField = () => {
type FormData = {
employee: object;
};

const schema: JSONSchemaType<FormData> = {
    title: "EmployeeDetails",
    type: "object",
    properties: {
        employee: {
            type: "object",
        },
    },
    required: [],
};

const ajv = new Ajv({
    allErrors: true,
    useDefaults: true,
    keywords: ["uniforms"],
});

function createValidator<T>(schema: JSONSchemaType<T>) {
    const validator = ajv.compile(schema);
    return (model: Record<string, unknown>) => {
        validator(model);
        return validator.errors?.length ? { details: validator.errors } : null;
    };
}

const schemaValidator = createValidator(schema);
const bridge = new JSONSchemaBridge(schema, schemaValidator);

const basicForm = () => {
    return <AutoForm schema={bridge} onSubmit={console.log}>
        <AutoField employeeType="Manager" employeeAge={23} name="employee" component={Employee} />
    </AutoForm >
};

return basicForm();

}`

Packages being used:-
"uniforms": "^4.0.0-alpha.3",
"uniforms-bridge-json-schema": "^4.0.0-alpha.3",
"uniforms-material": "^4.0.0-alpha.3",
"ajv": "^8.12.0",
"@material-ui/core": "^4.12.3",
"react": "^16.13.1",
"typescript": "^3.7.5"

We expect customization to be possible via the Schema.

[radekmie]

Hi @shashank-452! I just checked that and it works as expected, i.e., these props are available there. Are you sure you're rendering the result of connectField(Employee) and not Employee? That's what your code suggests.

(Side note: please try formatting your code using code blocks, i.e., ```.)

[shashank-452]

Hi @radekmie I was able to get it to working by changing one line in the code
I changed
export default connectField(Employee);
to
const EmployeeField = connectField(Employee); export default EmployeeField;