AutoForm does not include wrapped custom field in onModelChangeEvent

[Emmett Miller]

I have a custom AuthMethodField used as below. The selected values are not included in change model data. I assume that the reason is that it is a wrapped component (by autocomplete). Assuming that this is a forwardRef issue? I'm just not sure how to resolve it? Trigger model onChange event whenever selectedValues change?

import { Autocomplete, Box, Paper, TextField } from "@mui/material";
import { connectField, HTMLFieldProps, randomIds } from "uniforms";

export type AuthMethodProps = HTMLFieldProps<string, HTMLDivElement> & {
  authMethods: string[];
};

function AuthMethod({ value, label, authMethods }: AuthMethodProps) {
  const id = randomIds("auth-methods-");
  const CustomPaper = (props: any) => {
    return <Paper elevation={8} {...props} />;
  };

  return (
    <Box sx={{ mt: 1, mb: 1 }}>
      <Autocomplete
        multiple
        id={id()}
        // onChange={hanldleSelectedValuesChange}
        options={authMethods.map((option) => option)}
        getOptionLabel={(option) => option} // TODO: email is null on some users. Use name instead?
        isOptionEqualToValue={(a, b) => a === b}
        PaperComponent={CustomPaper}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label={label}
            placeholder={value}
            // onChange={handleOnChange}
          />
        )}
      />
    </Box>
  );
}

export default connectField(AuthMethod);

schema:

const schema: JSONSchemaType<Data> = {
  title: 'Access Request',
  type: 'object',
  properties: {
    authenticationMethods: {
      type: 'array',
      items: { type: 'string' },
      uniforms: { component: AuthMethodField, label: 'Authentication Methods', value: "Select methods", authMethods: ['OIDC', 'Kubernetes', 'AppRole', 'Other'] }
    },
  },
  required: ['authenticationMethods'],
};

const schemaValidator = createValidator(schema);

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

and form:

import { bridge as schema } from "./vault.schema";

export function Form() {
  const handleOnChangeModel = (data: any) => {
    send({ type: "FORM_SUBMIT", form: { ...data } });
    console.log(data); // selected auth methods are not showing in console
  };
  return (
    <AutoForm schema={schema} onChangeModel={handleOnChangeModel}>
      <AutoField name="authenticationMethods" />
    </AutoForm>
  );
}

Using:

"uniforms": "^4.0.0-alpha.1",
"uniforms-bridge-json-schema": "^4.0.0-alpha.1",
"uniforms-mui": "^4.0.0-alpha.1",

react 17.0.11

[Radosław Miernik]

Hi @emmett08. This field looks fine, but as you said - it's missing onChange. The basics of every uniforms-compatible field is reading the state from value and updating it via onChange.

[Radosław Miernik]

As there's no response, I'll close this issue. Please comment further if anything comes back.