added 'x' to clear value and fix required * (#32572)

fixes: #32546

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-09-03 20:17:00 +02:00 committed by GitHub
parent 44060c902e
commit d21327445d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 7 deletions

View file

@ -2,6 +2,6 @@ import type { ComponentProps } from "./components";
import { ClientSelect } from "../client/ClientSelect"; import { ClientSelect } from "../client/ClientSelect";
import { convertToName } from "./DynamicComponents"; import { convertToName } from "./DynamicComponents";
export const ClientSelectComponent = (props: ComponentProps) => { export const ClientSelectComponent = (props: ComponentProps) => (
return <ClientSelect {...props} name={convertToName(props.name!)} />; <ClientSelect {...props} name={convertToName(props.name!)} />
}; );

View file

@ -13,6 +13,7 @@ import {
FieldValues, FieldValues,
useFormContext, useFormContext,
} from "react-hook-form"; } from "react-hook-form";
import { getRuleValue } from "../../utils/getRuleValue";
import { FormLabel } from "../FormLabel"; import { FormLabel } from "../FormLabel";
import { import {
SelectControlProps, SelectControlProps,
@ -38,12 +39,13 @@ export const SingleSelectControl = <
formState: { errors }, formState: { errors },
} = useFormContext(); } = useFormContext();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const required = getRuleValue(controller.rules?.required) === true;
return ( return (
<FormLabel <FormLabel
name={name} name={name}
label={label} label={label}
isRequired={!!controller.rules?.required} isRequired={required}
error={get(errors, name)} error={get(errors, name)}
labelIcon={labelIcon} labelIcon={labelIcon}
> >

View file

@ -21,6 +21,7 @@ import {
FieldValues, FieldValues,
useFormContext, useFormContext,
} from "react-hook-form"; } from "react-hook-form";
import { getRuleValue } from "../../utils/getRuleValue";
import { FormLabel } from "../FormLabel"; import { FormLabel } from "../FormLabel";
import { import {
SelectControlOption, SelectControlOption,
@ -57,6 +58,7 @@ export const TypeaheadSelectControl = <
const [filterValue, setFilterValue] = useState(""); const [filterValue, setFilterValue] = useState("");
const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0); const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);
const textInputRef = useRef<HTMLInputElement>(); const textInputRef = useRef<HTMLInputElement>();
const required = getRuleValue(controller.rules?.required) === true;
const filteredOptions = options.filter((option) => const filteredOptions = options.filter((option) =>
getValue(option).toLowerCase().startsWith(filterValue.toLowerCase()), getValue(option).toLowerCase().startsWith(filterValue.toLowerCase()),
@ -147,7 +149,7 @@ export const TypeaheadSelectControl = <
<FormLabel <FormLabel
name={name} name={name}
label={label} label={label}
isRequired={!!controller.rules?.required} isRequired={required}
error={get(errors, name)} error={get(errors, name)}
labelIcon={labelIcon} labelIcon={labelIcon}
> >
@ -236,12 +238,12 @@ export const TypeaheadSelectControl = <
)} )}
</TextInputGroupMain> </TextInputGroupMain>
<TextInputGroupUtilities> <TextInputGroupUtilities>
{!!filterValue && ( {(!!filterValue || field.value) && (
<Button <Button
variant="plain" variant="plain"
onClick={() => { onClick={() => {
field.onChange(undefined);
setFilterValue(""); setFilterValue("");
field.onChange("");
textInputRef?.current?.focus(); textInputRef?.current?.focus();
}} }}
aria-label="Clear input value" aria-label="Clear input value"