Fixes in and not_in filter views for integer, bigInt, decimal and float fields

.changeset/thirty-grapes-laugh.md

@@ -0,0 +1,5 @@
+---
+'@keystone-6/core': patch
+---
+
+Fix `in` and `not_in` filter views for `integer`, `bigInt`, `decimal` and `float` fields

packages/core/src/fields/types/bigInt/views/index.tsx

@@ -227,19 +227,18 @@ export const controller = (
     validate: value =>
       validate(value, validation, config.label, hasAutoIncrementDefault) === undefined,
     filter: {
-      Filter(props) {
+      Filter({ autoFocus, type, onChange, value }) {
         return (
           <TextInput
-            // this should not be type=number since it shoud allow commas so the one of/not one of
-            // filters work but really the whole filtering UI needs to be fixed and just removing type=number
-            // while doing nothing else would probably make it worse since anything would be allowed in the input
-            // so when a user applies the filter, the query would return an error
-            type="number"
             onChange={event => {
-              props.onChange(event.target.value.replace(/[^\d,\s-]/g, ''));
+              if (type === 'in' || type === 'not_in') {
+                onChange(event.target.value.replace(/[^\d,\s-]/g, ''));
+                return;
+              }
+              onChange(event.target.value.replace(/[^\d\s-]/g, ''));
             }}
-            value={props.value}
-            autoFocus={props.autoFocus}
+            value={value}
+            autoFocus={autoFocus}
           />
         );
       },
@@ -248,8 +247,8 @@ export const controller = (
         const valueWithoutWhitespace = value.replace(/\s/g, '');
         const parsed =
           type === 'in' || type === 'not_in'
-            ? valueWithoutWhitespace.split(',').map(x => BigInt(x))
-            : BigInt(valueWithoutWhitespace);
+            ? valueWithoutWhitespace.split(',')
+            : valueWithoutWhitespace;
         if (type === 'not') {
           return { [config.path]: { not: { equals: parsed } } };
         }

packages/core/src/fields/types/decimal/views/index.tsx

@@ -197,14 +197,19 @@ export const controller = (
     }),
     validate: val => validate(val, validation, config.label) === undefined,
     filter: {
-      Filter(props) {
+      Filter({ autoFocus, type, onChange, value }) {
         return (
           <TextInput
             onChange={event => {
-              props.onChange(event.target.value.replace(/[^\d\.,\s-]/g, ''));
+              if (type === 'in' || type === 'not_in') {
+                onChange(event.target.value.replace(/[^\d,\s-]/g, ''));
+                return;
+              }
+
+              onChange(event.target.value.replace(/[^\d\s-]/g, ''));
             }}
-            value={props.value}
-            autoFocus={props.autoFocus}
+            value={value}
+            autoFocus={autoFocus}
           />
         );
       },

packages/core/src/fields/types/float/views/index.tsx

@@ -194,14 +194,18 @@ export const controller = (
     serialize: value => ({ [config.path]: value.value }),
     validate: value => validate(value, config.fieldMeta.validation, config.label) === undefined,
     filter: {
-      Filter(props) {
+      Filter({ autoFocus, type, onChange, value }) {
         return (
           <TextInput
             onChange={event => {
-              props.onChange(event.target.value.replace(/[^\d\.,\s-]/g, ''));
+              if (type === 'in' || type === 'not_in') {
+                onChange(event.target.value.replace(/[^\d\.,\s-]/g, ''));
+                return;
+              }
+              onChange(event.target.value.replace(/[^\d\.\s-]/g, ''));
             }}
-            value={props.value}
-            autoFocus={props.autoFocus}
+            value={value}
+            autoFocus={autoFocus}
           />
         );
       },

packages/core/src/fields/types/integer/views/index.tsx

@@ -207,19 +207,20 @@ export const controller = (
         config.fieldMeta.defaultValue === 'autoincrement'
       ) === undefined,
     filter: {
-      Filter(props) {
+      Filter({ autoFocus, type, onChange, value }) {
         return (
           <TextInput
-            // this should not be type=number since it shoud allow commas so the one of/not one of
-            // filters work but really the whole filtering UI needs to be fixed and just removing type=number
-            // while doing nothing else would probably make it worse since anything would be allowed in the input
-            // so when a user applies the filter, the query would return an error
-            type="number"
+            type="text"
             onChange={event => {
-              props.onChange(event.target.value.replace(/[^\d,\s-]/g, ''));
+              if (type === 'in' || type === 'not_in') {
+                onChange(event.target.value.replace(/[^\d,\s-]/g, ''));
+                return;
+              }
+
+              onChange(event.target.value.replace(/[^\d\s-]/g, ''));
             }}
-            value={props.value}
-            autoFocus={props.autoFocus}
+            value={value}
+            autoFocus={autoFocus}
           />
         );
       },