From d82f9e28cca18d1a1cf3c3031d6e0274a2f39a24 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 19 Jul 2023 15:18:07 +0200
Subject: [PATCH] use multi select if value is an array (#21808)

fixes: https://github.com/keycloak/keycloak/issues/20837#issuecomment-1639970579
---
 js/apps/admin-ui/src/user/UserProfileFields.tsx     | 13 ++++++++++---
 .../src/user/components/SelectComponent.tsx         |  8 ++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/js/apps/admin-ui/src/user/UserProfileFields.tsx b/js/apps/admin-ui/src/user/UserProfileFields.tsx
index 73d7940dd6..e89312b7cf 100644
--- a/js/apps/admin-ui/src/user/UserProfileFields.tsx
+++ b/js/apps/admin-ui/src/user/UserProfileFields.tsx
@@ -3,13 +3,14 @@ import { Form, Text } from "@patternfly/react-core";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useFormContext } from "react-hook-form";
 import { ScrollForm } from "../components/scroll-form/ScrollForm";
 import { useUserProfile } from "../realm-settings/user-profile/UserProfileContext";
 import { OptionComponent } from "./components/OptionsComponent";
 import { SelectComponent } from "./components/SelectComponent";
 import { TextAreaComponent } from "./components/TextAreaComponent";
 import { TextComponent } from "./components/TextComponent";
-import { DEFAULT_ROLES } from "./utils";
+import { DEFAULT_ROLES, fieldName } from "./utils";
 
 type UserProfileFieldsProps = {
   roles?: string[];
@@ -112,8 +113,14 @@ type FormFieldProps = {
 };
 
 const FormField = ({ attribute, roles }: FormFieldProps) => {
-  const componentType = (attribute.annotations?.["inputType"] ||
-    "text") as Field;
+  const { watch } = useFormContext();
+  const value = watch(fieldName(attribute));
+
+  const componentType = (
+    attribute.annotations?.["inputType"] || Array.isArray(value)
+      ? "multiselect"
+      : "text"
+  ) as Field;
   const Component = FIELDS[componentType];
 
   return <Component {...{ ...attribute, roles }} />;
diff --git a/js/apps/admin-ui/src/user/components/SelectComponent.tsx b/js/apps/admin-ui/src/user/components/SelectComponent.tsx
index 44f5de8d17..9065ba65ac 100644
--- a/js/apps/admin-ui/src/user/components/SelectComponent.tsx
+++ b/js/apps/admin-ui/src/user/components/SelectComponent.tsx
@@ -15,8 +15,8 @@ export const SelectComponent = ({
   const { control } = useFormContext();
   const [open, setOpen] = useState(false);
 
-  const isMultiSelect = attribute.annotations?.["inputType"] === "multiselect";
-  const options = (attribute.validations?.options as Options).options || [];
+  const options =
+    (attribute.validations?.options as Options | undefined)?.options || [];
   return (
     <UserProfileGroup {...attribute}>
       <Controller
@@ -29,7 +29,7 @@ export const SelectComponent = ({
             onToggle={(b) => setOpen(b)}
             onSelect={(_, value) => {
               const option = value.toString();
-              if (isMultiSelect) {
+              if (Array.isArray(field.value)) {
                 if (field.value.includes(option)) {
                   field.onChange(
                     field.value.filter((item: string) => item !== option),
@@ -43,7 +43,7 @@ export const SelectComponent = ({
               }
             }}
             selections={field.value ? field.value : t("common:choose")}
-            variant={isMultiSelect ? "typeaheadmulti" : "single"}
+            variant={Array.isArray(field.value) ? "typeaheadmulti" : "single"}
             aria-label={t("common:selectOne")}
             isOpen={open}
             isDisabled={