diff --git a/changelogs/DP-12890.md b/changelogs/DP-12890.md new file mode 100644 index 0000000000..c19dfe62b2 --- /dev/null +++ b/changelogs/DP-12890.md @@ -0,0 +1,4 @@ +___DESCRIPTION___ +Fixed +Minor +- (React) [InputCurrency] DP-12890: Pass event type to callback and fix `NaN` value when defaultValue is null using up/down buttons. #495 diff --git a/react/src/components/atoms/forms/InputCurrency/index.js b/react/src/components/atoms/forms/InputCurrency/index.js index 8137902597..81d5efc8f1 100644 --- a/react/src/components/atoms/forms/InputCurrency/index.js +++ b/react/src/components/atoms/forms/InputCurrency/index.js @@ -43,6 +43,7 @@ const Currency = (props) => ( return number; }; const handleChange = (e) => { + const { type } = e; let stringValue; if (typeof e.target.value !== 'string') { stringValue = String(e.target.value); @@ -70,11 +71,12 @@ const Currency = (props) => ( } context.updateState(update, () => { if (typeof props.onChange === 'function') { - props.onChange(numberValue, props.id); + props.onChange(numberValue, props.id, type); } }); }; const handleAdjust = (e, direction) => { + const { type } = e; let stringValue; if (typeof context.value !== 'string') { stringValue = String(context.value); @@ -94,7 +96,7 @@ const Currency = (props) => ( const { showError, errorMsg } = validNumber(newValue, props.min, props.max); context.updateState({ showError, errorMsg, value: toCurrency(newValue, 2) }, () => { if (typeof props.onChange === 'function') { - props.onChange(newValue, props.id); + props.onChange(newValue, props.id, type, direction); } }); } @@ -144,6 +146,7 @@ const Currency = (props) => ( } }, onKeyDown: (e) => { + const { type, key } = e; let stringValue; if (typeof context.value !== 'string') { stringValue = String(context.value); @@ -151,22 +154,24 @@ const Currency = (props) => ( stringValue = context.value; } const numberValue = numbro.unformat(stringValue); + // default to 0 if defaultValue is NaN + const baseValue = numberValue || 0; if (!Number.isNaN(numberValue) && stringValue.length > 0) { let newValue; - if (e.key === 'ArrowDown') { - newValue = Number(Number.parseFloat(numberValue - props.step).toFixed(2)); + if (key === 'ArrowDown') { + newValue = Number(Number.parseFloat(baseValue - props.step).toFixed(2)); const { showError, errorMsg } = validNumber(newValue, props.min, props.max); context.updateState({ showError, errorMsg, value: toCurrency(newValue, 2) }, () => { if (typeof props.onChange === 'function') { - props.onChange(newValue, props.id); + props.onChange(newValue, props.id, type, key); } }); - } else if (e.key === 'ArrowUp') { - newValue = Number(Number.parseFloat(numberValue + props.step).toFixed(2)); + } else if (key === 'ArrowUp') { + newValue = Number(Number.parseFloat(baseValue + props.step).toFixed(2)); const { showError, errorMsg } = validNumber(newValue, props.min, props.max); context.updateState({ showError, errorMsg, value: toCurrency(newValue, 2) }, () => { if (typeof props.onChange === 'function') { - props.onChange(newValue, props.id); + props.onChange(newValue, props.id, type, key); } }); }