diff --git a/packages/react-kit/src/components/form/Select.tsx b/packages/react-kit/src/components/form/Select.tsx index 9f17f404f..4826108ef 100644 --- a/packages/react-kit/src/components/form/Select.tsx +++ b/packages/react-kit/src/components/form/Select.tsx @@ -125,15 +125,6 @@ export default function SelectComponent({ const displayError = typeof displayErrorMessage === "string" && displayErrorMessage !== ""; - const handleChange = ( - option: Parameters>[0] - ) => { - if (!meta.touched) { - helpers.setTouched(true); - } - helpers.setValue(option); - onChange?.(option); - }; const handleBlur = () => { if (!meta.touched) { helpers.setTouched(true); @@ -150,7 +141,13 @@ export default function SelectComponent({ placeholder={placeholder} options={options} value={field.value} - onChange={handleChange} + onChange={(option, ...rest) => { + if (!meta.touched) { + helpers.setTouched(true); + } + helpers.setValue(option); + onChange?.(option, ...rest); + }} onBlur={handleBlur} isSearchable={isSearchable} isClearable={isClearable} diff --git a/packages/react-kit/src/components/form/types.ts b/packages/react-kit/src/components/form/types.ts index 7703e28d7..8a4c57d15 100644 --- a/packages/react-kit/src/components/form/types.ts +++ b/packages/react-kit/src/components/form/types.ts @@ -1,5 +1,10 @@ import { ReactNode } from "react"; -import { CSSObjectWithLabel, MultiValue, SingleValue } from "react-select"; +import Select, { + ActionMeta, + CSSObjectWithLabel, + MultiValue, + SingleValue +} from "react-select"; import { CSSProperties } from "styled-components"; import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal"; import type { @@ -8,6 +13,7 @@ import type { TextAreaTheme } from "./Field.styles"; import type { GridProps } from "../ui/Grid"; +import { StateManagerProps } from "react-select/dist/declarations/src/useStateManager"; export interface BaseProps { name: string; @@ -86,8 +92,7 @@ export interface BaseSelectProps { onChange?: OnChange; } -export interface SelectProps - extends BaseProps { +export type SelectProps = BaseProps & { isMulti?: M; disabled?: boolean; isClearable?: boolean; @@ -97,7 +102,8 @@ export interface SelectProps onChange?: ( option: M extends true ? MultiValue> - : SingleValue> + : SingleValue>, + actionMeta: ActionMeta> ) => void; label?: string; theme?: Partial<{ @@ -120,7 +126,13 @@ export interface SelectProps singleValue: Partial & Partial<{ error: CSSObjectWithLabel }>; }>; -} +} & Pick< + StateManagerProps< + SelectDataProps, + M extends undefined ? false : boolean + >, + "formatGroupLabel" | "formatOptionLabel" + >; export type UploadProps = BaseProps & { accept?: string;