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 { 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 }} />;

View file

@ -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={