From 60c6710eeb77239ac7820427ab63c19ee8ac04c1 Mon Sep 17 00:00:00 2001
From: Brian Cooper <20056195+coopbri@users.noreply.github.com>
Date: Mon, 29 Jul 2024 00:54:37 -0500
Subject: [PATCH] Fix `Combobox` input mixing controlled and uncontrolled state
 (#106)

---
 .changeset/tame-pumas-buy.md              | 5 +++++
 src/components/core/Combobox/Combobox.tsx | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tame-pumas-buy.md

diff --git a/.changeset/tame-pumas-buy.md b/.changeset/tame-pumas-buy.md
new file mode 100644
index 00000000..df204bec
--- /dev/null
+++ b/.changeset/tame-pumas-buy.md
@@ -0,0 +1,5 @@
+---
+"@omnidev/sigil": patch
+---
+
+Fix `Combobox` input mixing controlled and uncontrolled state
diff --git a/src/components/core/Combobox/Combobox.tsx b/src/components/core/Combobox/Combobox.tsx
index 2526ab44..810bbe78 100644
--- a/src/components/core/Combobox/Combobox.tsx
+++ b/src/components/core/Combobox/Combobox.tsx
@@ -163,7 +163,9 @@ const Combobox = ({
   ...rest
 }: ComboboxProps) => {
   const [filteredItems, setFilteredItems] = useState(items),
-    [inputValue, setInputValue] = useState(rest.defaultValue || "");
+    [defaultInputValue, setDefaultInputValue] = useState(
+      rest.defaultValue || "",
+    );
 
   /**
    * Handle input value change. Composes a custom `onInputValueChange` handler, if provided.
@@ -190,7 +192,7 @@ const Combobox = ({
     evt: ComboboxValueChangeDetails,
     onValueChange?: ComboboxProps["onValueChange"],
   ) => {
-    setInputValue(evt.items.map((item) => item.label).join(", "));
+    setDefaultInputValue(evt.items.map((item) => item.label).join(", "));
 
     // execute custom `onValueChange` handler, if provided
     onValueChange?.(evt);
@@ -218,7 +220,7 @@ const Combobox = ({
       )}
 
       <ComboboxControl {...controlProps}>
-        <ComboboxInput asChild value={inputValue} {...inputProps}>
+        <ComboboxInput asChild defaultValue={defaultInputValue} {...inputProps}>
           <Input colorPalette={colorPalette} />
         </ComboboxInput>