Uniforms: [BUG] filterDOMProps and uniforms-material package

[simplecommerce]

Hi,

Did something change in the filterDOMProps and uniforms-material package in 3.0.0-rc.5?

I have this example:

console.log(filterDOMProps({
      className: "SCComponent-submitBtn-75",
      color: "primary",
      variant: "contained",
      fullWidth: true
    }))

This used to return the whole object, but now in the latest version it only returns className and color, variant and fullWidth is missing.

You can see the example below, updated both the uniforms and uniforms-material package to the rc.5 and it causes this issue.

https://codesandbox.io/s/currying-snow-jk55s?file=/App.tsx

Any ideas?

[radekmie]

Hi @simplecommerce. Yes, it was changed in #803, to remove wrapField._filterDOMProps. I can see that it's not documented in the changelog either. Is this a problem for your project or you're just asking if it changed in the package itself?

[simplecommerce]

@radekmie Hi, thanks for the response, yes it affects my project because fullWidth and variant are available props that work on material-ui components, and in one of my scenario, I created a custom component (button) and I am using filterDOMProps(props) to remove all uniforms props, I wasn't expecting it to remove both fullWidth and variant also.

[radekmie]

OK, a workaround, for now, is to set these two props manually. I'll think about whether we should revert this change or not. Also, I'd like to hear your opinion on that.

[simplecommerce]

@radekmie Not to sound too stupid, but I am not sure I understand the reason for the change that impacts the filterDOMProps function. I think in my case, if I want to prevent having other issues due to similar changes that could arise because of improvements, I would have to create my own filterDOMProps function and remove the original uniforms props.

In my use case, since I am creating custom components, I only want to filter the original uniforms props and allow every other props to be passed to the underlying component.

I was thinking, if there would be a way to pass a prop or an argument to the filterDOMProps to ignore the removal of the material-ui package props?

Or something like that.

If not, its no problem, there is always a work around, I just wanted to be sure it was intentional.

[radekmie]

So the reason for that is that the wrapField helper understand some common props, like variant, and otherwise we'd need to remove them in every field (like we did, using internal wrapField._filterDOMProps).

[simplecommerce]

@radekmie Ok I see, is it possible for filterDOMProps to work on its own removing uniforms props, and the wrapField extend filterDOMProps without altering its behavior if used on its own, something like that?

[radekmie]

No, at least not right now, as filterDOMProps is a shared function. We've used a separate function for that before.

[asibilia]

@radekmie does this mean we're not able to pass variant props to Textfields? I'm currently trying to pass variant="outlined" to AutoField but doing so only applies the outlined styling to select fields.

[radekmie]

@asibilia Indeed, it won't work now. We've also found a few other places where it is a problem. We have to revert this change.

[radekmie]

@simplecommerce, @asibilia - would any of you be able to check, whether #830 solves your problems?

[simplecommerce]

@radekmie don't want to sound dumb but how would I test it?

[radekmie]

@simplecommerce You'd have to clone the repo locally, set it up (npm ci should be enough) and use local version of uniforms instead of the npm one (using file: pseudo-version; npm i path-to-root/packages/uniforms-material).

[simplecommerce]

@radekmie I think I am missing a step, I tried cloning the repo and the filter-props branch and then ran npm install in the root folder, after that I went to my project and ran npm install /path-to-root/packages/uniforms-material.

Seems to be ok then, I tried running my app and got this error.

Error: Cannot find module '/root/v3/backend/backend/node_modules/uniforms-material/es5/index.js'. Please verify that the package.json has a valid "main" entry

I think I am supposed to npm run build in the repo but it fails saying it can't find uniforms module.

Am I missing something?

Update: I ran npm run install instead it seems to be doing something, i am waiting for it to finish.

Ok so npm run install worked, after I installed it in my app, but now when I run it I get this error.

Uncaught Invariant Violation: useForm must be used within a form.

I tried uninstalling the package and installing the one from the repo, and it works again.

So I am wondering if anything else changed?

Update 2: Ok so I had to also npm install uniforms from the same local package. Upon first glance, it seems to work fine now with the revert, I commented my custom filterProps and the package one did its job, so it seems good to me.

If @asibilia wants to confirm also.

[radekmie]

@simplecommerce Thanks! The first problem seems a bit odd as npm ci (or npm i and npm install) should run npm run build anyway. Out of curiosity: what is your npm version?

[simplecommerce]

@radekmie yeah i had to specifically type npm run install to make it build and not just npm install and npm run build.

my npm version is 6.13.4