Exception when calling ref.reset() "value.map is not a function"

[Astroxslurg]

I have an AutoForm based on simpleSchema ('simpl-schema'), where the schema used consist of a string and an array of objects with strings. Like this:

body: String,
alternatives: Array,
alternatives.$: Objeect,
alternatives.$.alternative: String,

I have an an ref on this form that is passed to my submit-function, such that i can reset the form when I get a confirmation from the server that the document has been saved.

But, when I call reset() on the ref i get this exception!
"TypeError: value.map is not a function
at List (http://localhost:3000/packages/modules.js?hash=19ba.......)"

When I look at the source it seems to be uniforms-bootstrap4/ListField.js
I set a breakpoint at value.map and see that the first time this List-component is called value is just an empty string. Then at some point the List-component is called again and this time it is an array of objects.

Anyways, form ends up being cleared, so as long as calling ref.reset() is the last thing i do in my submit-function nothing breaks.
But, I still feel that it is worth mentioning this bug as it may cause problems in the future ;)

[radekmie]

Hi @Astroxslurg. So we have two points here:

• why ListField got an empty string,
• why ListField got an non-array.

(yes, these are two different questions)

First one is a bug - there's an ensureValue option in connectField, which works for most (HTML) inputs, where undefined value might be a problem (value -> undefined -> value), so ensureValue: true (default value), transforms undefined into an empty string but don't affect the model (source).

Second one is completely OK (in terms of being correct with the spec, maybe not an intuition): form.reset() simply set's model to an empty object (not really, it use this.props.model but in most cases you simply omit model in AutoForm; source). So why it's not working? It's because the connectField sets the default value on mount (source). In this case, use model={emptyModel} and it will work.

[Astroxslurg]

This worked perfectly!

Thank you very much, @radekmie! 😄

What I did, specifically, was to set

model={{
        body: '',
        alternatives: [{ alternative: '' }, { alternative: '' }],
      }}

Note that in my case alternatives has minCount = 2.

[Floriferous]

I'm still seeing this error in List component with the value coerced from undefined to an empty string. Shouldn't we check value is an array before mapping over it?

[radekmie]

@Floriferous: I don't know why, but none of the ListFields has set ensureValue: false. I'll fix it and release a new version - if it'll still occur, please file a new issue.

[Floriferous]

@radekmie Still seeing this issue on 1.29.0. Can we just check the value is an array before mapping over it?

[radekmie]

@Floriferous We can, but the thing is, that it should never be needed. I'll try to debug it a bit more and eventually introduce this check.

[Floriferous]

@radekmie The issue happens for us when we have large objects passed in our react components. I think some of the form models are being "built up" over the span of 1-2 seconds, causing some data to not be available when the form renders, which might lead to the bug.

I think @PlakJakub tried to investigate this but didn't find anything either.

[radekmie]

@Floriferous If so, please open a new issue, with a reproduction if possible. Such behavior (delayed because of the overhead) is different than this issue. Also, it's a very old issue - I'd rather not revive it.