Improve form library integration

[tobytraylor]

Perhaps Material UI should maintain their own integrations?

In your documentation you list

• final-form-material-ui
• formik-material-ui
• redux-form-material-ui
  as related projects for integrating with the associated form libraries. I've started a project and gone from one to the next to the next in absolute annoyance as i've discovered they are all in a state of disrepair. None have been updated in nearly a year. Most are still on v <1.0.0. All have a laundry list of outstanding bugs. I've thrown a day away trying to integrate with each of them and run into issue after issue. I'm wondering if it would make sense for Material UI to maintain their own integration layer with these form libs?

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

[oliviertassinari]

@tobytraylor Thank you for opening this issue. We document 4 integration in https://next.material-ui.com/demos/text-fields/#complementary-projects. I have recently removed uniforms-material so we compound people energy around a few popular solutions.

Regarding the trends in the community, it seems people are moving away from redux-form to use formik instead (stats).
But If you look at the download stats compared to React, it seems that most people don't use a form library at all, same trend within Material-UI 🤔.

I think that we should prioritize our integration in the following order:

1. formik cc @jhoffmcd
2. final-form cc @Deadly0
3. redux-form cc @erikras

I think that the first step is to update the documentation to change the order.

have all fallen apart

This is not fair, I would rather say that there are opportunities to improve the current state of affairs.

[jhoffmcd]

I recently integrated Formik into a project a few weeks ago with no problems using formik-material-ui. The biggest problem there was just documentation. Is this a proposal to make the integration more seamless? Also I was using v3, do we need to update for v4?

[tobytraylor]

Just wondering, what field types did you use? Basic TextField works fine but it took a while to get the TextField type="date" to format correctly. Took a while to figure out you have to add:

InputLabelProps={{
                                        shrink: true,
                                      }}

And I still haven't gotten the select to look or function correctly. If you figured out how to make it work correctly i'd appreciate the hints.

The formik-material-ui is the only one that mostly works right now. Final form material ui i had to edit each one of the field implementation to get them to kinda work.

[oliviertassinari]

@jhoffmcd v4 support should be identical. I'm not aware of any change that would impact the integration.

By the way, if we could get your feedback on #11377 (comment), it would be awesome, especially regarding the dilemma we face.

[jhoffmcd]

@tobytraylor I'll see if I can work on an examples section for formik-material-ui. It could show each use cases for all the supported input types. If the interop can be done better I can take a look as well.

[oliviertassinari]

@tobytraylor What issues to you see in https://codesandbox.io/s/9ywq085k9w?

[tobytraylor]

My requirements are to use the filled field. When updating it to use variant="filled":

• TextField does not animate properly Deadly0/final-form-material-ui#2
  (work around found though by modifying the component to use InputProps instead of inputProps)
• Select component variant doesn't propagate to the underlying material-ui component.

There was a third issue i ran into that required me to C&P the select wrapper and make edits to work around Typescript issues relating to inputProps which might in the end have just been a type issue but i started trying out formik and formik material ui at that point.

[lookfirst]

#17943 (i'm working on a modern react-final-form implementation)