Material-ui: [Zoom] Not accepting child component

[numToStr]

First of all, Thanks for giving this beautiful framework. It has always been a great experience to work with Material-UI.

Today, I updated my project to @material-ui/core@next. Successfully removed all deprecated props. But, failed to solve this issue. Prior to v4 this was working.

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

// Input Field component
const InputField = ({
    field,
    form: { touched, errors },
    ...props
}) => {
    const error = errors[field.name];
    return (
        <TextField
            variant="outlined"
            margin="dense"
            error={touched && error ? true : false}
            helperText={touched && error ? `- ${error}` : null}
            fullWidth
            {...field}
            {...props}
        />
    );
};

Expected Behavior 🤔

Zoom component is not accepting a <Field/> component from Formik as child.

import { Field } from 'formik';

<Zoom in={show}>
         <Field
                 name="title"
                 type="text"
                 variant="outlined"
                 margin="dense"
                 component={InputField}
          />
</Zoom>

Current Behavior 😯

Zoom should be given a <div/> to wrap the <Field/> component

import { Field } from 'formik';

<Zoom in={show}>
           <div>
                  <Field
                            name="title"
                            type="text"
                            variant="outlined"
                            margin="dense"
                            component={InputField}
                   />
           </div>
</Zoom>

Error

I am getting this error in the console.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Transition`.

Context 🔦

I am trying to animate fields/buttons in form whenever the form appears in the DOM.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | ^4.0.0-beta.0 |
| React | ^16.8.6 |
| Browser | Chromium: 74.0.3729.108 |

Fun Fact: This is my first contribution 😋

[oliviertassinari]

@eps1lon Would this change work for you? It doesn't break any test but solves the warning here.

--- a/packages/material-ui/src/utils/reactHelpers.js
+++ b/packages/material-ui/src/utils/reactHelpers.js
@@ -18,11 +18,13 @@ export function useForkRef(refA, refB) {
    * This means react will call the old forkRef with `null` and the new forkRef
    * with the ref. Cleanup naturally emerges from this behavior
    */
-  return React.useCallback(
-    refValue => {
-      setRef(refA, refValue);
-      setRef(refB, refValue);
-    },
-    [refA, refB],
-  );
+  return React.useMemo(() => {
+    if (refA || refB) {
+      return refValue => {
+        setRef(refA, refValue);
+        setRef(refB, refValue);
+      };
+    }
+    return null;
+  }, [refA, refB]);
 }

Would it create ref leaks? It shouldn't.

[oliviertassinari]

It seems we won't fix this here: #15519.
I believe Formik should forward the ref. I have shared a workaround: https://github.com/jaredpalmer/formik/pull/478#issuecomment-487742488.

[numToStr]

Is this really a fix or just a workaround?

[eps1lon]

@vkasraj #15526 should actually fix this.

[numToStr]

@vkasraj #15526 should actually fix this.

Waiting for next release 😋