Incorrect initial values for objects with array fields

[wight554]

When using array field (even with default value) I'm getting this:

Uncaught TypeError: parent.value is undefined
    ListAdd ListAddField.js:12
    React 4
ListAddField.js:12

Compiled module code:

import { __rest } from "tslib";
import FormControl from '@material-ui/core/FormControl';
import IconButton from '@material-ui/core/IconButton';
import cloneDeep from 'lodash/cloneDeep';
import React from 'react';
import { connectField, filterDOMProps, joinName, useField, } from 'uniforms';
function ListAdd(_a) {
    var { disabled, fullWidth = true, icon = '+', initialCount, margin = 'dense', name, readOnly, value, variant } = _a, props = __rest(_a, ["disabled", "fullWidth", "icon", "initialCount", "margin", "name", "readOnly", "value", "variant"]);
    const nameParts = joinName(null, name);
    const parentName = joinName(nameParts.slice(0, -1));
    const parent = useField(parentName, { initialCount }, { absoluteName: true })[0];
    const limitNotReached = !disabled && !(parent.maxCount <= parent.value.length);
    return (React.createElement(FormControl, { fullWidth: fullWidth, margin: margin, variant: variant },
        React.createElement(IconButton, Object.assign({}, filterDOMProps(props), { disabled: !limitNotReached, onClick: () => {
                if (!readOnly) {
                    parent.onChange(parent.value.concat([cloneDeep(value)]));
                }
            } }), icon)));
}
export default connectField(ListAdd, {
    initialValue: false,
    kind: 'leaf',
});

Easiest workaround would be not to use it, here you can find possible replacements:
https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-non-null-assertion.md

For example:

  const limitNotReached = !disabled && !(parent?.minCount !== undefined && value !== parent?.undefined && parent?.minCount >= parent?.value.length);

[radekmie]

Hi @wight554. We're aware of how the non-null assertion work, and it's being used deliberately in there. And while we could change this code, it should never be the case, that your ListAddField has a parent without a value. Could you show us, what does trigger this error?

[wight554]

Hi @wight554. We're aware of how the non-null assertion work, and it's being used deliberately in there. And while we could change this code, it should never be the case, that your ListAddField has a parent without a value. Could you show us, what does trigger this error?

Sure, schema is:

new SimpleSchema2Bridge(
  new SimpleSchema({
    string1: {
      type: String,
      label: 'Primary Objective',
    },
    object1: { type: Object, label: '' },
    'object1.boolean1': { type: Boolean, label: 'label 1' },
    'object1.array1': {
      type: Array,
      minCount: 1,
      defaultValue:[{}],
    },
    'object1.array1.$': { type: Object },
    'object1.array1.$.string1': { type: String },
    'object1.array1.$.string2': { type: String },
    'object1.array1.$.string3': { type: String },
  })
)

Easy to check, it breaks playground as well:
TypeError: m.value is undefined

[radekmie]

Thank you! I've stripped it down a little and here's a minimal reproduction:

new SimpleSchema2Bridge(
  new SimpleSchema({
    x: { type: Object },
    'x.y': { type: Array },
    'x.y.$': { type: String },
  })
)

[wight554]

seems like this schema might also break SelectField with multiple (at least with mui5):

Uncaught Error: MUI: The `value` prop must be an array when using the `Select` component with `multiple`.
    node_modules vendors-node_modules_date-io_date-fns_build_index_esm_js-node_modules_mui_icons-material_Add_-5b00d7.chunk.js:27657
    SelectInput2 SelectInput.js:359
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 10
    unstable_runWithPriority scheduler.development.js:468
    React 15
    tsx bootstrap.tsx:32
    factory react refresh:6
    Webpack 7
SelectInput.js:374

default value for array is undefined, would be better to have it as empty array

[radekmie]

I've dug into it, and the problem is more complicated than I thought. First of all, the default (initial) value of x.y is [], so this one is fine. However, the order in which they're set is not.

Using the schema I posted in #1112 (comment), we see these onChange calls:

{ key: 'x.y', value: [] }
{ key: 'x.y', value: [] }
{ key: 'x', value: {} }

(The x.y one is doubled, as one comes from the NestField, and the second from ListAddField.)

Of course, that's the expected order, because of the way how useEffect works. At the same time, this is NOT the wanted one. There are a few options then:

1. Provide an explicit default of x (object1 in your schema), like this: defaultValue: { y: [] } ({ array1: [] } in your schema). This will work straight away, with the current code (playground).
2. Improve the getInitialValue of... Well, all bridges. Right now, all of them return empty objects (here's an example). It could look like this:

        if (field.type === Object || field.type instanceof SimpleSchema) {
   -      return {};
   +      const value: Record<string, unknown> = {};
   +      this.getSubfields(name).forEach(key => {
   +        value[key] = this.getInitialValue(joinName(name, key));
   +      });
   +      return value;
        }

   It fixes this problem, but still, two unnecessary onChange calls happen.

To sum up, 1. is a workaround for the time being, if you need one. I'll think whether we can implement 2. in v3, as it's techincally a breaking change. If not, it'll definitely be there in v4. (I actually have a rework of the initial model logic in mind for a while.)