From 1c8e8cb999a68328b677151e857dc90b32d969d4 Mon Sep 17 00:00:00 2001
From: Sampaio Leal <samp14hd@gmail.com>
Date: Mon, 25 Apr 2022 17:35:19 -0300
Subject: [PATCH] fix: numeric field clear event

---
 package.json                                  |  2 +-
 .../NumericField/NumericField.stories.tsx     |  2 +-
 src/components/Inputs/NumericField/index.tsx  | 25 +++++++++++--------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index b59cf6c..9135190 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@euk-labs/componentz",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
diff --git a/src/components/Inputs/NumericField/NumericField.stories.tsx b/src/components/Inputs/NumericField/NumericField.stories.tsx
index 6fdc0e5..34ca63d 100644
--- a/src/components/Inputs/NumericField/NumericField.stories.tsx
+++ b/src/components/Inputs/NumericField/NumericField.stories.tsx
@@ -8,7 +8,7 @@ export default {
 } as ComponentMeta<typeof NumericField>;
 
 const Template: ComponentStory<typeof NumericField> = (args) => {
-  const [value, setValue] = useState<number | string | null>(null);
+  const [value, setValue] = useState<number | string>('');
   return (
     <NumericField
       {...args}
diff --git a/src/components/Inputs/NumericField/index.tsx b/src/components/Inputs/NumericField/index.tsx
index da78ae4..5e713bd 100644
--- a/src/components/Inputs/NumericField/index.tsx
+++ b/src/components/Inputs/NumericField/index.tsx
@@ -1,15 +1,15 @@
 import type { TextFieldProps } from '@mui/material';
 import { TextField } from '@mui/material';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 export interface HTMLNumericElement
   extends Omit<HTMLInputElement, 'value' | 'name'> {
-  value: number | null | '';
+  value: number | '';
   name?: string;
 }
 
 export type NumericInputProps = Omit<TextFieldProps, 'onChange'> & {
-  value?: number | string | null;
+  value?: number | string;
   onChange?(e: React.ChangeEvent<HTMLNumericElement>): void;
 
   precision: number;
@@ -31,7 +31,7 @@ function verifyNumber(string: string) {
 // TODO: support negative numbers
 function NumericField(props: NumericInputProps) {
   const { value, precision, thousandChar, decimalChar, ...inputProps } = props;
-  const defaultValue = value === null ? NaN : Number(value);
+  const defaultValue = value === '' ? NaN : Number(value);
 
   const formatter = useMemo(
     () =>
@@ -40,7 +40,7 @@ function NumericField(props: NumericInputProps) {
         maximumFractionDigits: precision,
       }),
 
-    [thousandChar, decimalChar]
+    [thousandChar, decimalChar, precision]
   );
 
   if (!decimalChar) {
@@ -67,7 +67,10 @@ function NumericField(props: NumericInputProps) {
       e.shiftKey ||
       e.key === 'Backspace' ||
       e.key === 'Enter' ||
-      e.key === 'Tab'
+      e.key === 'Tab' ||
+      e.key === 'ArrowRight' ||
+      e.key === 'ArrowLeft' ||
+      e.key === 'Delete'
     )
       return;
     if (!verifyNumber(e.key).isNumber) e.preventDefault();
@@ -94,15 +97,15 @@ function NumericField(props: NumericInputProps) {
 
     if (numericRepresentation === '') {
       e.target.value = '';
-      newEvent.target.value = null;
-      newEvent.currentTarget.value = null;
+      newEvent.target.value = '';
+      newEvent.currentTarget.value = '';
       return props.onChange && props.onChange(newEvent);
     }
 
     const { isNumber, numberFomart } = verifyNumber(numericRepresentation);
-    if (isNumber && numberFomart) {
-      const withPrecision = numberFomart / 10 ** precision;
 
+    if (isNumber && numberFomart !== null && numberFomart >= 0) {
+      const withPrecision = numberFomart / 10 ** precision;
       const formattedNumber = format(withPrecision);
 
       newEvent.target.value = withPrecision;
@@ -120,7 +123,7 @@ function NumericField(props: NumericInputProps) {
 
   if (hasValue) {
     if (isNaN(defaultValue) || value === '') {
-      inputValue = null;
+      inputValue = '';
     } else {
       inputValue = format(defaultValue);
     }