fix(filters): remove requirement for numberfields (#758)

* fix(filters): remove requirement for logScore.

* default to zero on numberfield clear

* code comment for parseInt

---------

Co-authored-by: soup <soup@r4tio.dev>

web/src/components/inputs/input.tsx

@@ -207,15 +207,15 @@ export const PasswordField = ({
 };
 
 interface NumberFieldProps {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    step?: number;
-    disabled?: boolean;
-    required?: boolean;
-    min?: number;
-    max?: number;
-    tooltip?: JSX.Element;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  step?: number;
+  disabled?: boolean;
+  required?: boolean;
+  min?: number;
+  max?: number;
+  tooltip?: JSX.Element;
 }
 
 export const NumberField = ({
@@ -230,20 +230,18 @@ export const NumberField = ({
   required
 }: NumberFieldProps) => (
   <div className="col-span-12 sm:col-span-6">
-    <label htmlFor={name} className="flex float-left mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+    <label
+      htmlFor={name}
+      className="flex float-left mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide"
+    >
       <div className="flex">
         {label}
-        {tooltip && (
-          <CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>
-        )}
+        {tooltip && <CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>}
       </div>
     </label>
 
     <Field name={name} type="number">
-      {({
-        field,
-        meta
-      }: FieldProps) => (
+      {({ field, meta, form }: FieldProps<number>) => (
         <div className="sm:col-span-2">
           <input
             type="number"
@@ -262,12 +260,20 @@ export const NumberField = ({
             )}
             placeholder={placeholder}
             disabled={disabled}
+            onChange={event => {
+              // safeguard and validation if user removes the number
+              // it will then set 0 by default. Formik can't handle this properly
+              if (event.target.value == "") {
+                form.setFieldValue(field.name, 0);
+                return;
+              }
+              form.setFieldValue(field.name, parseInt(event.target.value)); // Convert the input value to an integer using parseInt() to ensure that the backend can properly parse the numberfield as an integer.
+            }}
           />
           {meta.touched && meta.error && (
             <div className="error">{meta.error}</div>
           )}
         </div>
-
       )}
     </Field>
   </div>