diff --git a/.changeset/brown-cooks-sin.md b/.changeset/brown-cooks-sin.md new file mode 100644 index 000000000..46a2ec66f --- /dev/null +++ b/.changeset/brown-cooks-sin.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Fix for Combobox input inside Form. diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx index 7f7821ab5..2c76cf803 100644 --- a/src/components/fields/ComboBox/ComboBox.tsx +++ b/src/components/fields/ComboBox/ComboBox.tsx @@ -5,6 +5,7 @@ import { ReactElement, RefObject, useMemo, + useState, } from 'react'; import { useButton, @@ -133,12 +134,17 @@ export const ComboBox = forwardRef(function ComboBox( props: CubeComboBoxProps, ref: ForwardedRef, ) { + const [, rerender] = useState({}); + props = useProviderProps(props); props = useFormProps(props); props = useFieldProps(props, { valuePropsMapper: ({ value, onChange }) => ({ inputValue: value != null ? value : '', - onInputChange: (val) => onChange(val, !props.allowsCustomValue), + onInputChange: (val) => { + onChange(val, !props.allowsCustomValue); + rerender({}); + }, onSelectionChange: onChange, }), });