From 400d88257a3383595cf76c9399848b356dd51a11 Mon Sep 17 00:00:00 2001
From: Tim Leslie <timl@thinkmill.com.au>
Date: Fri, 7 May 2021 13:06:16 +1000
Subject: [PATCH] Fix integer select admin UI bugs (#5639)

---
 .changeset/ninety-buckets-mate.md                     | 5 +++++
 packages-next/fields/src/types/select/views/index.tsx | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/ninety-buckets-mate.md

diff --git a/.changeset/ninety-buckets-mate.md b/.changeset/ninety-buckets-mate.md
new file mode 100644
index 00000000000..c4ebcb0d004
--- /dev/null
+++ b/.changeset/ninety-buckets-mate.md
@@ -0,0 +1,5 @@
+---
+'@keystone-next/fields': patch
+---
+
+Fixed Admin UI issues when using `select` fields with `dataType: 'integer'`.
diff --git a/packages-next/fields/src/types/select/views/index.tsx b/packages-next/fields/src/types/select/views/index.tsx
index db857225210..70dd35459aa 100644
--- a/packages-next/fields/src/types/select/views/index.tsx
+++ b/packages-next/fields/src/types/select/views/index.tsx
@@ -74,6 +74,11 @@ export const controller = (
     label: x.label,
     value: x.value.toString(),
   }));
+
+  // Transform from string value to dataType appropriate value
+  const t = (v: string | null) =>
+    v === null ? null : config.fieldMeta.dataType === 'integer' ? parseInt(v) : v;
+
   return {
     path: config.path,
     label: config.label,
@@ -93,7 +98,7 @@ export const controller = (
       }
       return null;
     },
-    serialize: value => ({ [config.path]: value?.value ?? null }),
+    serialize: value => ({ [config.path]: t(value?.value ?? null) }),
     filter: {
       Filter(props) {
         return (
@@ -126,7 +131,7 @@ export const controller = (
           key = `${config.path}_not`;
         }
 
-        const value = isMulti ? options.map(x => x.value) : options[0].value;
+        const value = isMulti ? options.map(x => t(x.value)) : t(options[0].value);
 
         return { [key]: value };
       },