Fix filter input types for integer, bigInt, decimal and float field…

…s in the UI (keystonejs#7930) Co-authored-by: Gautam Singh <5769869+gautamsi@users.noreply.github.com> Co-authored-by: Daniel Cousens <dcousens@users.noreply.github.com>
fkrauthan · Oct 26, 2022 · 109db89 · 109db89
1 parent 4c08c11
commit 109db89
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 28 deletions.
diff --git a/.changeset/thirty-grapes-laugh.md b/.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
diff --git a/packages/core/src/fields/types/bigInt/views/index.tsx b/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 } } };
         }

diff --git a/packages/core/src/fields/types/decimal/views/index.tsx b/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}
           />
         );
       },

diff --git a/packages/core/src/fields/types/float/views/index.tsx b/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}
           />
         );
       },

diff --git a/packages/core/src/fields/types/integer/views/index.tsx b/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}
           />
         );
       },