curious-teal

Default values issue

Issue: I need help implementing a form field that: Initializes with real-time data (unitPrice from Firebase) Updates automatically only when other property changes (so basiclly defailt value needs to be udpdated when other external property passed Stops auto-updating after user modification Resets to new defaults when parent context changes (assetId) Current Behavior: When switching assets (assetId changes), price input doesn't update immediately Real-time price updates sometimes override user modifications Form initialization race conditions when data loads after mount

9 Replies

unwilling-turquoise•7mo ago

could you share your current attempt at solving it? it's fine if it doesn't work, but it helps to build off of what you've constructed to suggest fixes

curious-tealOP•7mo ago

I currently pass price default value as zero

  const form = useForm({
    defaultValues: {
      orderType: initialValues?.orderType ?? propOrderType,
      orderVariant: initialValues?.orderVariant ?? propOrderVariant,
      shares: initialValues?.units ?? 1,
      timeInForce: initialValues?.timeInForce ?? TimeInForce.DATE,
      expiryDate: initialValues?.expiryDate
        ? dayjs(initialValues.expiryDate).toDate()
        : dayjs().add(1, 'month').toDate(),
      price: initialValues?.limitPrice ?? 0,
      executionType: initialValues?.condition ?? ExecutionType.DEFAULT,
      minFillQty:
        initialValues?.units &&
        initialValues.condition === ExecutionType.MINIMUM_FILL
          ? initialValues.units
          : 0,
      settlementCycle:
        initialValues?.settlementCycle ??
        propSettlementCycle ??
        OrderSettlement.SETTLED,
    },
    onSubmit: async (values) => {
      setIsSubmitted(true);
    },
    validators: {
      onChange: isLoadingMaxCashAndUnits
        ? undefined
        : (schemaToValidate as any),
    },
  });

  const form = useForm({
    defaultValues: {
      orderType: initialValues?.orderType ?? propOrderType,
      orderVariant: initialValues?.orderVariant ?? propOrderVariant,
      shares: initialValues?.units ?? 1,
      timeInForce: initialValues?.timeInForce ?? TimeInForce.DATE,
      expiryDate: initialValues?.expiryDate
        ? dayjs(initialValues.expiryDate).toDate()
        : dayjs().add(1, 'month').toDate(),
      price: initialValues?.limitPrice ?? 0,
      executionType: initialValues?.condition ?? ExecutionType.DEFAULT,
      minFillQty:
        initialValues?.units &&
        initialValues.condition === ExecutionType.MINIMUM_FILL
          ? initialValues.units
          : 0,
      settlementCycle:
        initialValues?.settlementCycle ??
        propSettlementCycle ??
        OrderSettlement.SETTLED,
    },
    onSubmit: async (values) => {
      setIsSubmitted(true);
    },
    validators: {
      onChange: isLoadingMaxCashAndUnits
        ? undefined
        : (schemaToValidate as any),
    },
  });

and then i have useEffect

  useEffect(() => {
    form.setFieldValue(
      'price',
      isEditMode ? (initialValues?.limitPrice ?? unitPrice) : unitPrice
    );
    form.setFieldValue('shares', 1);
    form.validate('change');
  }, [
    form,
    initialValues?.condition,
    initialValues?.expiryDate,
    initialValues?.limitPrice,
    initialValues?.orderType,
    initialValues?.orderVariant,
    initialValues?.settlementCycle,
    initialValues?.timeInForce,
    initialValues?.units,
    isEditMode,
    propOrderType,
    propOrderVariant,
    propSettlementCycle,
    unitPrice,
  ]);

  useEffect(() => {
    form.setFieldValue(
      'price',
      isEditMode ? (initialValues?.limitPrice ?? unitPrice) : unitPrice
    );
    form.setFieldValue('shares', 1);
    form.validate('change');
  }, [
    form,
    initialValues?.condition,
    initialValues?.expiryDate,
    initialValues?.limitPrice,
    initialValues?.orderType,
    initialValues?.orderVariant,
    initialValues?.settlementCycle,
    initialValues?.timeInForce,
    initialValues?.units,
    isEditMode,
    propOrderType,
    propOrderVariant,
    propSettlementCycle,
    unitPrice,
  ]);

to avoid confusion initall values here are ment for editing flow this will make the form-re render with the new. value everytime the unit price changes i really can't find good solution for this issue

unwilling-turquoise•7mo ago

and the unit price is editable by the user? If not, then it shouldn‘t be a form value. If it can, then you‘ll overwrite the user‘s custom set value which sounds like confusing UX

curious-tealOP•7mo ago

Yes it is editable by the user, And i don't want to override the user value, i just pre fill the form with some inital values and user can change it, but if user changed his asset Id for example it needs to change the data

unwilling-turquoise•7mo ago

then a listener on the assetId field sounds more like what you‘re looking for

curious-tealOP•7mo ago

But assetid is not field in form it is prop to the component

unwilling-turquoise•7mo ago

do you need form meta to be preserved between changing assetId? or is a complete rerender okay?

curious-tealOP•7mo ago

Complete re render okay

unwilling-turquoise•7mo ago

React‘s key property can be used to inform React that a component needs a complete rerender so a wrapper with assetId around the component containing the form could force rerenders

Gaming

Programming

Default values issue

Did you find this page helpful?