From b46ff52f09f543c9612c76512c23f6df859c95a7 Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Wed, 24 Jan 2024 12:01:16 +0100
Subject: [PATCH]  #819 Fix number input message

---
 browser/CHANGELOG.md                          |  1 +
 .../src/components/forms/InputNumber.tsx      | 46 +++++++++++++------
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
index 72c6e1fcd..89aa4a65b 100644
--- a/browser/CHANGELOG.md
+++ b/browser/CHANGELOG.md
@@ -13,6 +13,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - [#780](https://github.com/atomicdata-dev/atomic-server/issues/780) Use tags in ontology editor to create enum properties.
 - [#810](https://github.com/atomicdata-dev/atomic-server/issues/810) Add button to resource selectors to navigate to the selected resource.
 - [#764](https://github.com/atomicdata-dev/atomic-server/issues/764) Add option to format numbers as currency in tables.
+- [#819](https://github.com/atomicdata-dev/atomic-server/issues/819) Fix number input always shows 'required' even when it's optional.
 - Fix server not rebuilding client when files changed.
 - Added persistent scrollbar to table
 - Improved table header UX
diff --git a/browser/data-browser/src/components/forms/InputNumber.tsx b/browser/data-browser/src/components/forms/InputNumber.tsx
index 40088132d..a145bfd85 100644
--- a/browser/data-browser/src/components/forms/InputNumber.tsx
+++ b/browser/data-browser/src/components/forms/InputNumber.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react';
-import { Datatype, useNumber } from '@tomic/react';
+import { Datatype, useNumber, validateDatatype } from '@tomic/react';
 import { InputProps } from './ResourceField';
-import { ErrMessage, InputStyled, InputWrapper } from './InputStyles';
+import { InputStyled, InputWrapper } from './InputStyles';
+import { useValidation } from './formValidation/useValidation';
+import { ErrorChipInput } from './ErrorChip';
+import { styled } from 'styled-components';
 
 export default function InputNumber({
   resource,
@@ -9,7 +11,7 @@ export default function InputNumber({
   commit,
   ...props
 }: InputProps): JSX.Element {
-  const [err, setErr] = useState<Error | undefined>(undefined);
+  const [err, setErr, onBlur] = useValidation();
   const [value, setValue] = useNumber(resource, property.subject, {
     handleValidationError: setErr,
     validate: false,
@@ -17,30 +19,48 @@ export default function InputNumber({
   });
 
   function handleUpdate(e: React.ChangeEvent<HTMLInputElement>) {
+    setErr(undefined);
+
     if (e.target.value === '') {
-      setValue(undefined);
+      if (props.required) {
+        setErr('Required');
+      }
 
-      return;
+      setValue(undefined);
+    } else {
+      try {
+        const newVal = +e.target.value;
+        validateDatatype(newVal, property.datatype);
+        setValue(newVal);
+      } catch (er) {
+        setErr('Invalid Number');
+      }
     }
 
-    const newval = +e.target.value;
-    setValue(newval);
+    if (props.required && e.target.value === '') {
+      setErr('Required');
+    }
   }
 
   return (
-    <>
-      <InputWrapper>
+    <Wrapper>
+      <InputWrapper $invalid={!!err}>
         <InputStyled
           placeholder='Enter a number...'
           type='number'
           value={value === undefined ? '' : Number.isNaN(value) ? '' : value}
           step={property.datatype === Datatype.INTEGER ? 1 : 'any'}
           onChange={handleUpdate}
+          onBlur={onBlur}
           {...props}
         />
       </InputWrapper>
-      {value !== undefined && err && <ErrMessage>{err.message}</ErrMessage>}
-      {value === undefined && <ErrMessage>Required</ErrMessage>}
-    </>
+      {err && <ErrorChipInput top='2rem'>{err}</ErrorChipInput>}
+    </Wrapper>
   );
 }
+
+const Wrapper = styled.div`
+  flex: 1;
+  position: relative;
+`;