fix: money input not updating

thr-consulting · Jan 4, 2024 · ae3e2e6 · ae3e2e6
1 parent e3fe20a
commit ae3e2e6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 15 deletions.
diff --git a/packages/controls/package.json b/packages/controls/package.json
@@ -46,7 +46,7 @@
     "lodash-es": "^4.17.15",
     "luhn": "^2.4.1",
     "react-credit-cards": "^0.8.3",
-    "react-currency-input-field": "^3.6.12",
+    "react-currency-input-field": "^3.6.14",
     "react-datepicker": "^4.25.0",
     "react-table": "^7.6.3",
     "social-insurance-number": "^0.2.2",

diff --git a/packages/controls/src/money/MoneyInput/MoneyInput.tsx b/packages/controls/src/money/MoneyInput/MoneyInput.tsx
@@ -2,7 +2,7 @@ import {toMoney} from '@thx/money';
 import debug from 'debug';
 import type {Currency} from 'js-money';
 import type Money from 'js-money';
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback} from 'react';
 import CurrencyInput, {CurrencyInputProps} from 'react-currency-input-field';
 import {Input, InputProps} from 'semantic-ui-react';
 
@@ -22,24 +22,16 @@ export interface MoneyInputProps {
 
 export function MoneyInput(props: MoneyInputProps & Omit<InputProps, 'onChange'>) {
 	const {name, onBlur, locked, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, ...rest} = props;
-	const [localValue, setLocalValue] = useState<string | undefined>('');
 
 	const handleChange: CurrencyInputProps['onValueChange'] = useCallback(
 		(v): void => {
 			if (onChange) {
-				setLocalValue(v);
 				onChange(toMoney(v || 0, defaultCurrency || 'CAD'));
 			}
 		},
 		[defaultCurrency, onChange],
 	);
 
-	useEffect(() => {
-		if (!localValue && value) {
-			setLocalValue(value?.toDecimal().toString());
-		}
-	}, [localValue, value]);
-
 	return (
 		<Input {...rest}>
 			<CurrencyInput
@@ -51,7 +43,7 @@ export function MoneyInput(props: MoneyInputProps & Omit<InputProps, 'onChange'>
 				onValueChange={handleChange}
 				style={{textAlign: 'right'}}
 				onBlur={onBlur}
-				value={localValue}
+				value={value?.toDecimal() || 0}
 			/>
 		</Input>
 	);

diff --git a/yarn.lock b/yarn.lock
@@ -15264,10 +15264,10 @@ react-credit-cards@^0.8.3:
   dependencies:
     payment "^2.3.0"
 
-react-currency-input-field@^3.6.12:
-  version "3.6.12"
-  resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.12.tgz#6c59bec50b9a769459c971f94f9a67b7bf9046f7"
-  integrity sha512-92mVEo1u7tF8Lz5JeaEHpQY/p6ulmnfSk9r3dVMyykQNLoScvgQ7GczvV3uGDr81xkTF3czj7CTJ9Ekqq4+pIA==
+react-currency-input-field@^3.6.14:
+  version "3.6.14"
+  resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.14.tgz#63e1de0345b709536335247793414f309552f233"
+  integrity sha512-pUM4oK1KkUjjcFH7t6GksbuYwGpNhX3We2l41V9PIyJjm1HVlJGbKNksr0PNXGsQZqXDIKBJxL3TAbTS4cbKgg==
 
 react-datepicker@^4.25.0:
   version "4.25.0"