Material-ui: Maximum update depth exceeded when using multiple Selects inside FormControl

[istarkov]

Maximum update depth exceeded when using multiple Selects inside FormControl.
Example https://codesandbox.io/s/9yx2x72yqp

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce (for bugs)

Place 2 Select controls inside FormControl, one Select have empty value, other is not
(I found this on beta34 but it's reproduced on beta40)
https://codesandbox.io/s/9yx2x72yqp

Investigating now.

[istarkov]

So after investigating we have:

Input component for Select with empty value always calls muiFormControl.onEmpty() here but
Input component for Select with non empty value always calls muiFormControl.onFilled(); here

Having that FormControl calls setState on both calls with different values we have infinite render loop.

[istarkov]

I have no idea how to fix it better, as not sure why filled: true is used inside FormControl, if it needed to show dirty form state so we should not call muiFormControl.onFilled via React lifecycles i.e. componentDidUpdate componentDidMount as it's on user to create dirty state ;-)

BTW I feel it was some reason to call that methods from lifecycles?

[istarkov]

And seems like the main issue that I incorrectly use FormControl ;-)

[oliviertassinari]

as not sure why filled: true is used inside FormControl

@istarkov I'm assuming you are referring to this line:
https://github.com/mui-org/material-ui/blob/bc80a575710ddda00c1f2aadbc717b927870002a/src/Form/FormControl.js#L115
We do it in order to update the context value. Then, a component like the InputLabel can handle this state.

And seems like the main issue that I incorrectly use FormControl ;-)

Yes, you did use the API incorrectly! 😆 I'm having a hard time leveraging this information into something actionable. Any idea how to improve the situation? Otherwise, I think that we can close the issue and keep it as documentation for this edge case.

[istarkov]

Having that my ideas will make source unreadable and 100% will cause new issues,
having that locally all I need is just few symbols of code to resolve this super rare issue and
It will be better to close ;-)

Thank you!!!

[bportman]

What was the workaround here? Commenting out code in FormControl.js? I am having the same issue. Thanks.

[rrdlpl]

any update on this?

[bportman]

Yes put each select inside it's own form control component. It's not meant to be otherwise. That change fixed it for me instantly.

[kpennell]

@bportman
I had to fix this with checkbox via including () => . Feels dirty because I'm just avoiding the 'this' rabbit hole. ie. it works but I don't know why really.

onChange={() => this.superFunction}