Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v8.0.4] Initial Values not available in Field componentWillMount #4304

Open
lewisheadden opened this issue Dec 14, 2018 · 18 comments · May be fixed by #4397
Open

[v8.0.4] Initial Values not available in Field componentWillMount #4304

lewisheadden opened this issue Dec 14, 2018 · 18 comments · May be fixed by #4397

Comments

@lewisheadden
Copy link

lewisheadden commented Dec 14, 2018

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

In componentWillMount for Field/FieldArray etc. components, field values are not set to their initialValues. See that in the console.log from componentWillMount in the sandbox the field value is "".

What is the expected behavior?

In 7.4.2, initial values were available in Field components during the componentWillMount lifecycle. See that the console.log now reads jim as per the provided initial value.

Sandbox Link

Redux Form 8.0.4: https://codesandbox.io/s/0yvykqqxwl
Redux Form 7.4.2: https://codesandbox.io/s/p423x6y30

What's your environment?

Redux Form 8.0.4

Other information

Please let me know if you need any more clarity and thanks for all the work you do!

@nerfologist
Copy link

I believe this is also the cause of my issue:

I am testing the upgrade to redux-form 8.0.4 using jest and enzyme's mount to mount a connected redux form with initialValues.

I am getting PropTypes warnings that required values are the wrong type (required boolean fields being passed empty strings). Logging renders I see a first render with empty string values, followed by a second render with the correct values. The first render seems to be generating the warning.

@alxmiron
Copy link

Also get this error. props.input.value is always an empty string on componentWillMount, componentDidMount and first render call. I cannot initialize my forms without propTypes errors
https://codesandbox.io/s/my7x8m83ox

@tomasztomys
Copy link
Contributor

the same error with sync validation and array... I don't get initial value of array to validate function in first render

@DavyJohnes
Copy link

DavyJohnes commented Dec 19, 2018

Hi @erikras, any thoughts about this? May be any temp workaround? For my use cases redux-form v8 is completely broken because of this issue.

@jjosef
Copy link

jjosef commented Dec 21, 2018

componentWillMount is deprecated

@lewisheadden
Copy link
Author

@jjosef You are correct. However, to clarify, moving this call to a constructor (as per the deprecation notification) shows the same problem.

If there's something else you think I should be doing, please let me know!

@srisonti
Copy link

I'm running into this same issue - I'm seeing the initialize action dispatched to Redux, the store is showing the correct values for both the values and initial keys, but then the individual Field components are all getting empty strings as values (however, if I inspect their meta props, the meta.initial prop is showing the correct initial value that the field should be using).

Has anyone had any luck getting around this?

@chrishearn
Copy link

Also hitting this same issue with empty strings for props.input.value but only affecting a custom component that receives an JSON object for initialValue. All other normal fields seem to be working. Not managed to find a workaround yet.

@MartijnHols
Copy link

MartijnHols commented Feb 25, 2019

initialValues don't seem to be loaded into the redux form state until after an initial render. Several of my components rely on there being an initial value so I made a helper decorator for a quick fix for those components so I don't have to rewrite all my components, just decorate them. The decorator simply doesn't render the form until it's initialized.

reduxFormRequireInitialized.js

import React from 'react';

/**
 * redux-form introduced a breaking bug in 8.0 where forms are no longer initialized before the initial render. Some of our forms rely on this behavior. To avoid issues caused by this bug, we can decorate those forms with this decorator to hold rendering until the redux-form is initialized.
 */
export default Component => (
  props => {
    if (!props.initialized && props.initialValues !== undefined) {
      return null;
    }

    return (
      <Component {...props} />
    );
  }
);

@alxmiron
Copy link

The decorator simply doesn't render the form until it's initialized

I suppose this can lead to blinks or UI shifts

@kgram
Copy link

kgram commented Mar 12, 2019

I've just encountered this as well. I think the problem is that react-redux has slightly changed behaviour after switching to the new context API. The initialize action is fired and the store is updated before rendering the connected field, but react-redux serves up a snapshot from when the render began. While this is annoying in this case, it does seem like a more correct behaviour.

I think it can be very simply fixed by reading value from initialValues instead of formState before initialization, a one-line change. I'll put together a pull-request.

@kgram kgram linked a pull request Mar 12, 2019 that will close this issue
@GuillotJessica
Copy link

GuillotJessica commented Mar 13, 2019

Redux Form 8.0.4: https://codesandbox.io/s/0yvykqqxwl will work better with constructor like this :

  constructor(props) {
    super(props)
    console.log(this.props.input.value);
  }

then modal doesn't render an empty string

@lynxtaa
Copy link

lynxtaa commented Mar 26, 2019

Issue is gone after updating to [email protected]

@pwhipp
Copy link

pwhipp commented May 29, 2019

Upgrading to [email protected] and [email protected] appears to have introduced this problem into my application.
Upgrading to [email protected] and [email protected] does not appear to have got rid of it :(

@eugensunic
Copy link

Any news on that facing the same issues...

@levino
Copy link

levino commented Sep 18, 2020

@eugensunic Please read the deprecation notice and consider using final form...

@eugensunic
Copy link

@levino I already have , currently on 7.4.2 and the next step in migration only.

@darekkay
Copy link

This might be resolved with 8.3.10. From a first look, I didn't encounter the problem anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.