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:
parent
44060c902e
commit
d21327445d
3 changed files with 11 additions and 7 deletions
|
@ -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!)} />
|
||||
);
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue