Fix Combobox input mixing controlled and uncontrolled state (#106)

omnidotdev · Jul 29, 2024 · 60c6710 · 60c6710
1 parent 00916b6
commit 60c6710
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/tame-pumas-buy.md 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
@@ -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>