diff --git a/packages/controlled-form/src/lib/AsyncAutocomplete.tsx b/packages/controlled-form/src/lib/AsyncAutocomplete.tsx index 7f5df613f..150e95a09 100644 --- a/packages/controlled-form/src/lib/AsyncAutocomplete.tsx +++ b/packages/controlled-form/src/lib/AsyncAutocomplete.tsx @@ -42,6 +42,7 @@ export const ControlledAsyncAutocomplete = < ...rest }: ControlledAsyncAutocompleteProps) => { const { setValue } = useFormContext(); + const emptyValue = rest?.multiple ? [] : null; return ( { if (reason === 'clear') { - onChange(transform?.output?.(null) ?? null); + onChange(transform?.output?.(null) ?? emptyValue); } onChange(transform?.output?.(value) ?? value); }} onBlur={onBlur} - value={transform?.input?.(value) ?? value ?? null} + value={transform?.input?.(value) ?? value ?? emptyValue} loadOptions={async (offset, limit, inputValue) => { const { options, hasMore, offset: returnedOffsetValue } = await rest.loadOptions(offset, limit, inputValue); diff --git a/packages/controlled-form/src/lib/Autocomplete.tsx b/packages/controlled-form/src/lib/Autocomplete.tsx index 353da5408..f7a986e5f 100644 --- a/packages/controlled-form/src/lib/Autocomplete.tsx +++ b/packages/controlled-form/src/lib/Autocomplete.tsx @@ -37,6 +37,7 @@ export const ControlledAutocomplete = < transform, ...rest }: ControlledAutocompleteProps) => { + const emptyValue = rest?.multiple ? [] : null; return ( { if (reason === 'clear') { - onChange(transform?.output?.(null) ?? null); + onChange(transform?.output?.(null) ?? emptyValue); } onChange(transform?.output?.(value) ?? value); }} onBlur={onBlur} - value={transform?.input?.(value) ?? value ?? null} + value={transform?.input?.(value) ?? value ?? emptyValue} /> )} />