Update gets triggered on render with initialValues about final-form-calculate HOT 13 OPEN

Interesting.
This does not happen, when you specify the field as a regex.
And, it gets triggered, but it seems that the changes won't be applied to the values.

Came across this, because I'm looking for a way to do a initial calculation with the initial values

from final-form-calculate.

@cordial, I got to work around this by wrapping createDecorator function in my own really small decorator that returns the original decorator called with form as its argument. In the updates property you can now access form and check if it is pristine. If it is, simply return an empty object :)

Instead of writing

const myDecorator = createDecorator({
  field: 'fieldA',
  updates: {
    b: (fieldAValue, allValues) => { 
      //your calculation 
    }
  }
});

you can write

const myDecorator = form => createDecorator({
  field: 'fieldA',
  updates: form.getState().pristine? {} : {
    b: (fieldAValue, allValues) => { 
      //your calculation 
    }
  }
})(form)

from final-form-calculate.

Sorry for necroposting.
I recently stumbled across the same problem.
@leonardopolly suggestion didn't work for me in case when updates is a function, not an object.
So I just put an if statement inside a function, like this

const myDecorator = form => createDecorator({
  field: 'fieldA',
  updates: (fieldAValue, fieldName, allValues, prevAllValues) => { 
      if (form.getState().pristine) return {}
      //your calculation 
    }
  }
})(form)

Maybe, it will be useful for somebody.

from final-form-calculate.

Did anyone find a work around for this?

from final-form-calculate.

Perhaps you can use the field's pristine prop to watch for a change on that specific field? Pristine will respect initialValues.
https://github.com/final-form/final-form#pristine-boolean

Edit: Although I don't see the API able to get meta of the field?

from final-form-calculate.

Just a thought but is there a chance the form is rendered before the initial values are available and adding them to an existing form could be the culprit? This could be confirmed either with the React profiler tool or logic to prevent render until you have the data for initialValues ready?

from final-form-calculate.

I think that this is valid behavior. I am using exactly this functionality, in order to calculate additional fields, based on initial ones.

from final-form-calculate.

@Dragomir-Ivanov Right, but just because use exploit that fact that it functions like this doesn't mean that it's expected behaviour.

I personally would expect an "update" hook to run on updates only, not creation/initialisation. I mean, that could easily be handled outside of Final Form entirely.

I do think that this is a an issue that would potentially cause a new major release since it might break a lot of existing uses of this plugin.

from final-form-calculate.

Just a thought but is there a chance the form is rendered before the initial values are available and adding them to an existing form could be the culprit? This could be confirmed either with the React profiler tool or logic to prevent render until you have the data for initialValues ready?

@Soundvessel If you look at my sandbox sample in the original post, you'll see that the value is there from the start.

from final-form-calculate.

@AdamGerthel You may be right. For the time being I guess you can fork your own Decorator, final-form-calculate is rather small, until this issue is settled.

from final-form-calculate.

Is there any way round this? I load my initial values from a DB and this sets off an update which can make the values different from the DB values.

from final-form-calculate.

@cordial, I got to work around this by wrapping createDecorator function in my own really small decorator that returns the original decorator called with form as its argument. In the updates property you can now access form and check if it is pristine. If it is, simply return an empty object :)

Instead of writing

const myDecorator = createDecorator({
  field: 'fieldA',
  updates: {
    b: (fieldAValue, allValues) => { 
      //your calculation 
    }
  }
});

you can write

const myDecorator = form => createDecorator({
  field: 'fieldA',
  updates: form.getState().pristine? {} : {
    b: (fieldAValue, allValues) => { 
      //your calculation 
    }
  }
})(form)

How can you get access to the form state, when you need to set decorator to render form, and only inside form render callback you can get form state.

from final-form-calculate.

@dozen1488

How can you get access to the form state, when you need to set decorator to render form, and only inside form render callback you can get form state.

According to the official docs, a decorator is a function that receives the form api as a parameter, subscribes to it, making changes as the state changes, and returns an Unsubscribe function.
https://final-form.org/docs/final-form/types/Decorator

So when you create a decorator using the createDecorator function, that function call is returning another function in the shape of formApi => { // whatever change you told the decorator to make }

from final-form-calculate.