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 { convertToName } from "./DynamicComponents";
export const ClientSelectComponent = (props: ComponentProps) => {
return <ClientSelect {...props} name={convertToName(props.name!)} />;
};
export const ClientSelectComponent = (props: ComponentProps) => (
<ClientSelect {...props} name={convertToName(props.name!)} />
);

View file

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

View file

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