added required attribute to multiline (#34336)

fixes: #32786

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-10-29 13:32:25 +01:00 committed by GitHub
parent 27677a0432
commit 2e8b01aec1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 4 deletions

View file

@ -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 (

View file

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

View file

@ -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")}