use multi select if value is an array (#21808)
fixes: https://github.com/keycloak/keycloak/issues/20837#issuecomment-1639970579
This commit is contained in:
parent
086b85fad4
commit
d82f9e28cc
2 changed files with 14 additions and 7 deletions
|
@ -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 }} />;
|
||||||
|
|
|
@ -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={
|
||||||
|
|
Loading…
Reference in a new issue