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 { 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 }} />;
|
||||
|
|
|
@ -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={
|
||||
|
|
Loading…
Reference in a new issue