#819 Fix number input message

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

browser/data-browser/src/components/forms/InputNumber.tsx

@@ -1,46 +1,66 @@
-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,
   property,
   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,
     commit,
   });
 
   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;
+`;