CurrencyInput is not reset with Formik/ReactHookForm

[SalahAdDin]

Describe the bug When using this input with either Formik or ReactHookForm and resetting the form state, it still keeps the updated value.

To Reproduce Steps to reproduce the behavior:

1. Go to the modal with the form.
2. Modify the value of the required input.
3. Modify the value of other inputs.
4. Close/Cancel the modal with the form.
5. Open the modal again.
6. Check the inputs and see CurrencyInput wasn't reset.

Expected behavior It should act like the other inputs and receive its value reset as well.

Additional context You can see the actual behavior in the video:

https://user-images.githubusercontent.com/5034215/190878969-764c1aed-01de-4b2f-a083-6ef3521392a1.mov

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SalahAdDin]

👍🏽 ⬆️

[surgieboi]

anyone solve this yet?

[ekasuweantara]

@surgieboi I'm using the react hook form with a controller, this is the component I made

<Controller
  name="amount"
  control={control}
  render={({ field }) => (
    <CurrencyField
      allowNegativeValue={false}
      allowDecimals={false}
      groupSeparator="."
      decimalSeparator=","
      value={field.value}
      name={field.name}
      control={control}
    />
  )}
/>

call reset function to reset the field reset({amount: ""})

[jake-crane]

I'm seeing the same issue.

edit: I think in my case the issue is related to changing the value prop to undefined. So coalescing to empty string seems to be a work-around for me.

ex: value={amount ?? ''}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SalahAdDin]

@cchanxzy What do you think about this?

[BLOCKMATERIAL]

@cchanxzy same problem

[xyz1hang]

I think the issue might be the state used here, which changes as keystroke happens.

All 4 examples uses their own state to set value.

There seems to be no way to have both programmatically set value and value from key stroke without maintaining your own state

@cchanxzy if userValue passed in ... !== undefined && ... !== null, including initial default value, no matter what key pressed no new value will be renedered.

[cchanxzy]

Is this still an issue? I imagine it is.

Can someone create a code sandbox so I can have a look?

Thanks

[jake-crane]

Here's a codesandbox example of the Issue I was running into: https://codesandbox.io/s/elegant-darwin-lt8mpx?file=/src/App.tsx

To trigger the issue, enter a number in the input and then click the reset button. Notice that the value is set to undefined, but the currency input still displays the number that you entered.

[mochetts]

Having the same issue here

[aconrad]

I'm not sure about the original issue, but other folks on this thread seem to encounter an issue specifically when the value is set to undefined. To separate concerns from the original issue, I've create a new ticket specifically when undefined is passed with a Sandbox reproducible case. Feel free to follow along: https://github.com/cchanxzy/react-currency-input-field/issues/322

[williamtobing]

as already mentioned, the value is turned to undefined when it's empty

here is how I deal with it

<FormField
  control={form.control}
  name="price"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Price</FormLabel>
      <FormControl>
        <CurrencyInput
          prefix="Rp "
          groupSeparator="."
          decimalSeparator=","
          placeholder="Rp 0"
          decimalsLimit={2}
          value={field.value}
          onValueChange={(value) => {
            field.onChange(value ?? '');
          }}
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

[SalahAdDin]

Why is it closed?