From 5f6a52d9074f4876d39d581d891cfbc8868dd8e4 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 9 Dec 2024 09:57:11 +0100
Subject: [PATCH] fix(ComboBox): input value inside form

---
 .changeset/brown-cooks-sin.md               | 5 +++++
 src/components/fields/ComboBox/ComboBox.tsx | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brown-cooks-sin.md

diff --git a/.changeset/brown-cooks-sin.md b/.changeset/brown-cooks-sin.md
new file mode 100644
index 00000000..46a2ec66
--- /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 7f7821ab..2c76cf80 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<T extends object>(
   props: CubeComboBoxProps<T>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
+  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,
     }),
   });