use multi select if value is an array (#21808)

fixes: https://github.com/keycloak/keycloak/issues/20837#issuecomment-1639970579
This commit is contained in:
Erik Jan de Wit 2023-07-19 15:18:07 +02:00 committed by GitHub
parent 086b85fad4
commit d82f9e28cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 7 deletions

View file

@ -3,13 +3,14 @@ import { Form, Text } from "@patternfly/react-core";
import { Fragment } from "react"; import { Fragment } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useFormContext } from "react-hook-form";
import { ScrollForm } from "../components/scroll-form/ScrollForm"; import { ScrollForm } from "../components/scroll-form/ScrollForm";
import { useUserProfile } from "../realm-settings/user-profile/UserProfileContext"; import { useUserProfile } from "../realm-settings/user-profile/UserProfileContext";
import { OptionComponent } from "./components/OptionsComponent"; import { OptionComponent } from "./components/OptionsComponent";
import { SelectComponent } from "./components/SelectComponent"; import { SelectComponent } from "./components/SelectComponent";
import { TextAreaComponent } from "./components/TextAreaComponent"; import { TextAreaComponent } from "./components/TextAreaComponent";
import { TextComponent } from "./components/TextComponent"; import { TextComponent } from "./components/TextComponent";
import { DEFAULT_ROLES } from "./utils"; import { DEFAULT_ROLES, fieldName } from "./utils";
type UserProfileFieldsProps = { type UserProfileFieldsProps = {
roles?: string[]; roles?: string[];
@ -112,8 +113,14 @@ type FormFieldProps = {
}; };
const FormField = ({ attribute, roles }: FormFieldProps) => { const FormField = ({ attribute, roles }: FormFieldProps) => {
const componentType = (attribute.annotations?.["inputType"] || const { watch } = useFormContext();
"text") as Field; const value = watch(fieldName(attribute));
const componentType = (
attribute.annotations?.["inputType"] || Array.isArray(value)
? "multiselect"
: "text"
) as Field;
const Component = FIELDS[componentType]; const Component = FIELDS[componentType];
return <Component {...{ ...attribute, roles }} />; return <Component {...{ ...attribute, roles }} />;

View file

@ -15,8 +15,8 @@ export const SelectComponent = ({
const { control } = useFormContext(); const { control } = useFormContext();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const isMultiSelect = attribute.annotations?.["inputType"] === "multiselect"; const options =
const options = (attribute.validations?.options as Options).options || []; (attribute.validations?.options as Options | undefined)?.options || [];
return ( return (
<UserProfileGroup {...attribute}> <UserProfileGroup {...attribute}>
<Controller <Controller
@ -29,7 +29,7 @@ export const SelectComponent = ({
onToggle={(b) => setOpen(b)} onToggle={(b) => setOpen(b)}
onSelect={(_, value) => { onSelect={(_, value) => {
const option = value.toString(); const option = value.toString();
if (isMultiSelect) { if (Array.isArray(field.value)) {
if (field.value.includes(option)) { if (field.value.includes(option)) {
field.onChange( field.onChange(
field.value.filter((item: string) => item !== option), field.value.filter((item: string) => item !== option),
@ -43,7 +43,7 @@ export const SelectComponent = ({
} }
}} }}
selections={field.value ? field.value : t("common:choose")} selections={field.value ? field.value : t("common:choose")}
variant={isMultiSelect ? "typeaheadmulti" : "single"} variant={Array.isArray(field.value) ? "typeaheadmulti" : "single"}
aria-label={t("common:selectOne")} aria-label={t("common:selectOne")}
isOpen={open} isOpen={open}
isDisabled={ isDisabled={