Unable To Overwrite Auto Populating Custom Text Field

default discord avatar
2 weeks ago

I have a custom field which is a calculated value that depends on 2 sibling fields. The following function uses setValue to populate that field inside of a useEffect function with siblings as dependencies.

The problem:

If I manually change that field (which at times I would like to), it persists to the database with the overwritten value, but upon page refresh it shows the calculated field since the useEffect runs on load. Is there a way in payload to make it effect only if a sibling value is changed manually and not on load? is useEffect the correct way to do it?

import React, { useEffect } from "react"; import { useField, useAllFormFields, reduceFieldsToValues, Label, TextInput, } from "payload/components/forms"; import { Props } from "payload/components/fields/Text"; export const CustomOutgoingPayment: React.FC<Props> = ({ path, label, name, }) => { const { value, setValue } = useField<string>({ path }); const [fields] = useAllFormFields(); const formData = reduceFieldsToValues(fields, true); const calculationFunction = () => { let calculatedOutgoingPayment = formData?.incomingPayment - formData?.incomingPayment * (formData?.calculationPercentage / 100); setValue(calculatedOutgoingPayment); }; useEffect(() => { calculationFunction(); }, [formData.incomingPayment, formData.calculationPercentage]); return ( <> <Label label={label} /> <TextInput value={value !== undefined ? value : ""} name={name} path="OutgoingPaymentField" onChange={(e) => setValue(e.target.value)} /> </> ); };

I suppose it became more of a React question. I managed to solve this by changing the useEffect() to use the mount pattern with a custom hook. Code is as follows:

Replace the useEffect with the following:

const useEffectAfterMount = (cb, dependencies) => { const mounted = useRef(true); useEffect(() => { if (!mounted.current) { return cb(); } mounted.current = false; }, dependencies); }; useEffectAfterMount(() => { calculationFunction(); }, [formData.incomingPayment, formData.calculationPercentage]);
    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!


    Connect with the Payload Community on Discord



    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.