When value is set to the CurrencyInput, any user typing the input doesn't change the value shown on the input field

[muhrifqii]

Describe the bug When value is set to the CurrencyInput, any user typing the input doesn't change the value shown on the input field

To Reproduce Steps to reproduce the behavior: Just use below code and you could see the bug

any type for the list

interface Debtor {
  username: string;
  amount: number;
}

and the reproduce code:

debtorList.map((debtor) => (
                        <div key={debtor.username} className="flex flex-row items-baseline space-x-2 py-1">
                            <div className="relative w-full">
                                <CurrencyInput
                                    name="amount"
                                    placeholder="Amount"
                                    decimalScale={2}
                                    decimalSeparator="."
                                    groupSeparator=","
                                    value={debtor.amount}
                                    onValueChange={(v, n, values) => {
                                        console.log('value changed', values?.value);
                                    }}
                                />
                            </div>
                        </div>
                    ))

Expected behavior When value is set, it should not prevent user input changes

[HamadTheIronside]

You should use defaultValue prop instead of value. Passing value makes it controlled and you have to update the value using onValueChange.

[muhrifqii]

You should use defaultValue prop instead of value. Passing value makes it controlled and you have to update the value using onValueChange.

So there's no way to change the value programmatically?

[barrownicholas]

So there's no way to change the value programmatically?

Just like any other controlled/stateful component, you need to set the value to a state and then update that value using the onValueChange function. https://medium.com/@vitorbritto/react-design-patterns-controlled-uncontrolled-component-pattern-7335b85413a0.

[muhrifqii]

@barrownicholas Yes you're right. I forgot the concept of controlled components. Thanks for the heads up