Value is not showing up in DOM even after binding value to component

[4manasa]

Code:

[kasduck]

Hi @4manasa 👋

Thanks for the detailed report and the helpful screenshots!

The images confirm that your React state (totalAmount) is updating correctly and the CurrencyTextField component is receiving the updated prop (value="500" as shown in the React DevTools). However, as you noted, the underlying HTML <input> element in the DOM is not reflecting this updated value (value="").

This typically points to an issue within the CurrencyTextField component itself, specifically in how it synchronizes prop changes with the internal AutoNumeric instance that controls the input field.

Looking at the component's implementation (especially older versions using Class Components), the logic for handling prop updates was primarily in the componentWillReceiveProps lifecycle method. There was a check like:

// Inside componentWillReceiveProps(newProps)...
const isValueChanged = this.props.value !== newProps.value && this.getValue() !== newProps.value;
if (isValueChanged) {
  this.autonumeric.set(newProps.value);
}

While intended to prevent unnecessary updates, this isValueChanged check (comparing both the prop change and the current internal value) could sometimes fail to trigger the this.autonumeric.set() call under certain conditions or due to timing nuances, especially on the first update after mount (like in your useEffect example).

Suggestions:

1. Update to Latest Version: The component has undergone significant refactoring in newer versions (like the functional component version we discussed earlier) which use useEffect hooks for handling prop updates. This modern approach is generally more reliable for synchronizing props with internal state/instances like AutoNumeric. Please try updating to the latest version of @unicef/material-ui-currency-textfield to see if this resolves the issue.

   npm install @unicef/material-ui-currency-textfield@latest
   # or
   yarn add @unicef/material-ui-currency-textfield@latest

2. If Unable to Update (Workaround): If you are using an older version and cannot update immediately, you could try simplifying the check within componentWillReceiveProps in your local version/fork. A more direct approach might be sufficient:

   // Inside componentWillReceiveProps(newProps) in CurrencyTextField.js
   // Make sure this.autonumeric instance exists before calling set
   if (this.props.value !== newProps.value && this.autonumeric) {
        // Always attempt to set if the prop reference changed.
        // AutoNumeric's `set` method often handles cases where the actual numeric value hasn't changed.
        this.autonumeric.set(newProps.value ?? null); // Ensure null is passed if value is undefined/null
   }

3. Type Consistency (Minor Point): While AutoNumeric usually handles string/number inputs well, ensuring you consistently pass either numbers or numeric strings to the value prop might prevent potential edge cases, especially if using specific outputFormat settings. In your example, changing setTotalAmount("500") to setTotalAmount(500) might be slightly cleaner if your outputFormat is 'number'.

Could you please try updating the package to the latest version first? If the issue persists or you cannot update, let me know!

---