Validation does not work correctly on Material-ui input with key prop

Describe the bug I am using material-ui input element. And application has multiple language. I change label prop on language change to pass new label. And i use key prop to trigger styles calculation. But after this, the form validations does not work correctly

Expected behavior Validations should work fine.

Screenshots Initial Render: No error and submit works fine

After language switch: Error does not go away

Desktop (please complete the following information):

• OS: ios
• Browser: Chrome

Additional context This is how my textfield from material-ui looks:

<TextField name="email" key={state.lang} label={${intl.formatMessage({ id: 'generic.email' })} *} margin="normal" variant="outlined" helperText={errors.email ? intl.formatMessage({ id: errors.email.message }) : ''} inputRef={register} error={errors.email ? true : false} />

[leapful]

@bluebill1049 I have the same issue while using Material-UI with react-form-hook. After debugging, I found that the issue is a side effect from method findRemovedFieldAndRemoveListener().

For example, in sample codesandbox of @ASHFAQPATWARI, when switching language, Login component will be re-rendered and method registerIntoFieldRef will be triggered too.’

https://github.com/bluebill1049/react-hook-form/blob/88e29b696f265ffdafd329e038dc0842f75a9dd2/src/useForm.ts#L379

But at this time, fieldsRef already has value (referenced to old HTML Input element of email and password) therefore fieldsRef is not updated.

Right after the execution of registerIntoFieldRef(), JSS library (used by Material-UI) is executed to update style for input component but it also triggers callback on MutationObserver from method onDomRemove().

https://github.com/bluebill1049/react-hook-form/blob/681fd2f824f116dd749075ce42d01f04a7e009b5/src/utils/onDomRemove.ts#L3

Because the HTML Input element from parameter of onDomRemove() is the old element that does not exist in the current rendering page, method isDetached() returns true and onDetachCallback() will be triggered and this callback is findRemovedFieldAndRemoveListener().

https://github.com/bluebill1049/react-hook-form/blob/681fd2f824f116dd749075ce42d01f04a7e009b5/src/utils/onDomRemove.ts#L19

At this time, findRemovedFieldAndRemoveListener() will remove all values in fieldsRef.

https://github.com/bluebill1049/react-hook-form/blob/681fd2f824f116dd749075ce42d01f04a7e009b5/src/logic/findRemovedFieldAndRemoveListener.ts#L5

Now all values in fieldsRef has been removed, when clicking on submit button, method handleSubmit() always gets empty values from method getFieldsValues() and causes the wrong validation.

https://github.com/bluebill1049/react-hook-form/blob/681fd2f824f116dd749075ce42d01f04a7e009b5/src/useForm.ts#L537

In summary, the root cause is from findRemovedFieldAndRemoveListener() which is executed on old data by MutationObserver on document when style is changed.

A workaround is to put unSubscribe() inside Login component to clean up old data before re-rendering.

Updated working sample: https://codesandbox.io/s/react-hook-form-issue-on-first-click-ffhr0

[leapful]

@bluebill1049 Nice trick to update ref 👍 Actually, we can just use “lang” of Login component props as dependency for useEffect.

const Login = ({lang}) => {
    ...
    const [, forceUpdate] = React.useState({});

    React.useEffect(() => forceUpdate({}), [lang]);
    ...
};