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 { 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!)} />
|
||||||
};
|
);
|
||||||
|
|
|
@ -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}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue