Uniforms: Custom AutoField fails in nested fields

[cesarve77]

Example:

const schema=new SimpleSchema({
    key1: String,//works
    key2: Number, //works
    key3: new SimpleSchema({
        key4: String, //fails, it used Original AutoField
    })
})

Thanks

[cesarve77]

I found the problem,. never mind

[cesarve77]

Well, looking the code.
AutoField fails in nested fields

in NestField.js
AutoField is imported from the src.

May be a solution is pass autoField to the context.

NestField.js ->

import React          from 'react';
import connectField   from 'uniforms/connectField';
import filterDOMProps from 'uniforms/filterDOMProps';
import injectName     from 'uniforms/injectName';
import joinName       from 'uniforms/joinName';

import AutoField from './AutoField';

[radekmie]

Hi @cesarve77. If you have a custom AutoField and want it to flow to the nested fields, create a custom NestField too - there's no such option right now and we probably won't add it.

[cesarve77]

If is suitable the solution to pass autoField to the context I can work in a pull request

[radekmie]

Somehow that's what I meant: I don't think it's a good idea. Data passed in the context should be as small as possible. Also, in this case, either we need to introduce a new argument to connectField, explicitly use context in the components or pass it to every field - none of these three sounds good to me. And as always, I like to encourage custom themes.

[cesarve77]

OK, no promblem

[cesarve77]

Other solution can be create a configuration function for uniforms where we can pass a default AutoField to be used along of the app.

import config from 'uniforms'

config({defaultAutoField: myCustomAutoField})

and AutoFields, ListFields, ListItemField and NestField instead of import AutoField, they will get it from previous config.

[radekmie]

Well, it won’t work on this level, more probably on the theme level, as some people (including me) are using few themes in one app, each with a different AutoField. I’ll think about it and let you know.

[radekmie]

I can't think about anything, that won't involve some weird API or a lot of custom code. I'll close it for now, but I'm open to ideas.

[Floriferous]

Some kind of configuration would indeed be helpful.

Maybe along the lines of what @cesarve77 suggested, with a bit more configurability, like making it a function that has access to the context of the form:

import config from 'uniforms';
import AutoField from 'uniforms/AutoField';
import AutoFieldCustom1 from './AutoFieldCustom1';
import AutoFieldCustom2 from './AutoFieldCustom2';

config({ getAutoField: ({ context: { theme }) => {
  if (theme === 'custom-theme-1') {  
    return AutoFieldCustom1;
  }
  if (theme === 'custom-theme-2') {  
    return AutoFieldCustom2;
  }
 return AutoField;
} 
});

const MyForm = () => <AutoForm theme="custom-theme-2" />

Right now I just want to make ListItemField use our own AutoField, which makes me copy-paste both ListField and ListItemField in my code base, edit 2 lines in each file. It's more like a fork, not really a theme. (and I also have both versions imported in my client, so bundle-size wise it's not great)