[FormControl] Maximum update depth exceeded

[Mangatt]

Apparently, [FormControl] component supports only one [Input]. Following code throws error Maximum update depth exceeded

<FormControl>
    <Input value="a" />
    <Input value="" />
</FormControl>

When both [Input]s are with empty value or both are filled, everything is okay. When one is filled and other is not, error is thrown.

I'm not sure if this is bug, but if that is intentional, I guess that Docs should mention that and React.Children.only should be used.

[oliviertassinari]

I guess that Docs should mention that and React.Children.only should be used.

@Mangatt You can only use a single input within a FormControl. But it doesn't mean you can't use a label + input + helper text.

[Mangatt]

Noted, thanks.

I would probably mention that in [FormControl] docs, it's better than finding out yourself.

[oliviertassinari]

@Mangatt I agree, I think that we could add a note about it in the FormControl API documentation page:
https://github.com/mui-org/material-ui/blob/d0efa75ce0b2e9b194fddfb833d6f852190cd3cb/packages/material-ui/src/FormControl/FormControl.js#L37-L46

Is this something you want to work on? :)

[Mangatt]

Sure, I can try. Let me dive into contributing guidelines first.

[voliva]

This no longer happens in master. See this sandbox: https://codesandbox.io/s/material-ui-issue-forked-my1u6?file=/src/Demo.js

I've bisected it was (probably unexpectedly) fixed in #17436 (version 4.4.3 onward), but the warning message from #16907 is still shown.

Is it something that should be avoided even if it works? I have a use case where I need to have a composed control of a Select + Input (e.g. Phone type + phone number makes a single control "Phone" that should have a unified validation)

@oliviertassinari @eps1lon

[oliviertassinari]

@voliva We recommend to avoid it because some states are meant to impact a single textbox, e.g. focused, filled.