React/input currency pass event to callback (#498)

* pass event to InputCurrency callback function

* prevent NaN value using onKeyDown for InputCurrency

* add changelog

* reformat changelog to md

* retain sythentic events

* update changelog

* Update react/src/components/atoms/forms/InputCurrency/index.js

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

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,29 +146,32 @@ const Currency = (props) => (
               }
             },
             onKeyDown: (e) => {
+              const { type, key } = e;
               let stringValue;
               if (typeof context.value !== 'string') {
                 stringValue = String(context.value);
               } else {
                 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);
                     }
                   });
                 }