Input component destroys muiFormControl context which breaks complex components

https://github.com/mui-org/material-ui/blob/0385a631c992afc3a2a94c7ae35975a018ca4173/src/Input/Input.js#L241

I have a react-select component wrapped into FormControl and Input according to the explanation on your website. I think I added FormControl myself to control the behaviour of Label which I added to make it resemble all the other input components.

So a component which wraps react-select and is provided as inputComponent to Input triggers onBlur and onFocus from muiFormControl context in order to control the behaviour for Select.

However this context is not propagated any longer down the line.

Because FormControl doesn’t accept focused as an argument, controlling it’s state of focus is impossible in this case now

Is it possible to make Input behaviour in part where it erases the context optional?

[oliviertassinari]

Thanks for the gist. Hopefully, It will help someone in the community.

[iamdanthedev]

Hello Olivier Thanks for information regarding shrink, I didn’t know about it

Yesterday I have solved the problem by separating <Input inputComponent... /> into a separate component which reads context and manages muiFormControl.onDirty and onClean itself, instead of relying on the underlying component (SelectWrapped) to do so, as the latter doesn’t have that context any longer.

Maybe this (still a bit messy) file will be of any use: https://gist.github.com/iamdanthedev/2a70e95d8964979f689721a34b2d15b3

(L255-264)

Thanks!