added required attribute to multiline (#34336)
fixes: #32786 Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
parent
27677a0432
commit
2e8b01aec1
3 changed files with 21 additions and 4 deletions
|
@ -2,9 +2,9 @@ import {
|
||||||
Button,
|
Button,
|
||||||
ButtonVariant,
|
ButtonVariant,
|
||||||
InputGroup,
|
InputGroup,
|
||||||
|
InputGroupItem,
|
||||||
TextInput,
|
TextInput,
|
||||||
TextInputProps,
|
TextInputProps,
|
||||||
InputGroupItem,
|
|
||||||
} from "@patternfly/react-core";
|
} from "@patternfly/react-core";
|
||||||
import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
|
import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
|
||||||
import { Fragment, useEffect, useMemo } from "react";
|
import { Fragment, useEffect, useMemo } from "react";
|
||||||
|
@ -25,6 +25,7 @@ export type MultiLineInputProps = Omit<TextInputProps, "form"> & {
|
||||||
isDisabled?: boolean;
|
isDisabled?: boolean;
|
||||||
defaultValue?: string[];
|
defaultValue?: string[];
|
||||||
stringify?: boolean;
|
stringify?: boolean;
|
||||||
|
isRequired?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const MultiLineInput = ({
|
export const MultiLineInput = ({
|
||||||
|
@ -33,6 +34,7 @@ export const MultiLineInput = ({
|
||||||
isDisabled = false,
|
isDisabled = false,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
stringify = false,
|
stringify = false,
|
||||||
|
isRequired = false,
|
||||||
id,
|
id,
|
||||||
...rest
|
...rest
|
||||||
}: MultiLineInputProps) => {
|
}: MultiLineInputProps) => {
|
||||||
|
@ -78,11 +80,17 @@ export const MultiLineInput = ({
|
||||||
const fieldValue = values.flatMap((field) => field);
|
const fieldValue = values.flatMap((field) => field);
|
||||||
setValue(name, stringify ? toStringValue(fieldValue) : fieldValue, {
|
setValue(name, stringify ? toStringValue(fieldValue) : fieldValue, {
|
||||||
shouldDirty: true,
|
shouldDirty: true,
|
||||||
|
shouldValidate: true,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
register(name);
|
register(name, {
|
||||||
|
validate: (value) =>
|
||||||
|
isRequired && toStringValue(value || []).length === 0
|
||||||
|
? t("required")
|
||||||
|
: undefined,
|
||||||
|
});
|
||||||
}, [register]);
|
}, [register]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -22,7 +22,7 @@ export default function NewOrganization() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { realm } = useRealm();
|
const { realm } = useRealm();
|
||||||
const form = useForm();
|
const form = useForm({ mode: "onChange" });
|
||||||
const { handleSubmit, formState } = form;
|
const { handleSubmit, formState } = form;
|
||||||
|
|
||||||
const save = async (org: OrganizationFormType) => {
|
const save = async (org: OrganizationFormType) => {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation";
|
import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation";
|
||||||
import {
|
import {
|
||||||
|
FormErrorText,
|
||||||
HelpItem,
|
HelpItem,
|
||||||
TextAreaControl,
|
TextAreaControl,
|
||||||
TextControl,
|
TextControl,
|
||||||
|
@ -33,7 +34,10 @@ export const OrganizationForm = ({
|
||||||
readOnly = false,
|
readOnly = false,
|
||||||
}: OrganizationFormProps) => {
|
}: OrganizationFormProps) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { setValue } = useFormContext();
|
const {
|
||||||
|
setValue,
|
||||||
|
formState: { errors },
|
||||||
|
} = useFormContext();
|
||||||
const name = useWatch({ name: "name" });
|
const name = useWatch({ name: "name" });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -64,13 +68,18 @@ export const OrganizationForm = ({
|
||||||
fieldLabelId="domain"
|
fieldLabelId="domain"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
isRequired
|
||||||
>
|
>
|
||||||
<MultiLineInput
|
<MultiLineInput
|
||||||
id="domain"
|
id="domain"
|
||||||
name="domains"
|
name="domains"
|
||||||
aria-label={t("domain")}
|
aria-label={t("domain")}
|
||||||
addButtonLabel="addDomain"
|
addButtonLabel="addDomain"
|
||||||
|
isRequired
|
||||||
/>
|
/>
|
||||||
|
{errors?.["domains"]?.message && (
|
||||||
|
<FormErrorText message={errors["domains"].message.toString()} />
|
||||||
|
)}
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<TextControl
|
<TextControl
|
||||||
label={t("redirectUrl")}
|
label={t("redirectUrl")}
|
||||||
|
|
Loading…
Reference in a new issue