🐛 Optional fields stay controlled when cleared

Author: bqst

packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx

@@ -199,7 +199,10 @@ const ComboboxImpl = <T extends Value = string>(
     setOpen(open)
   }
 
-  const hasValue = selectedValues?.length > 0
+  // Treat empty string as no value for single-select
+  const hasValue = isArrayValue
+    ? selectedValues?.length > 0
+    : selectedValues?.length > 0 && selectedValues !== ""
 
   const showTag = hasValue && isArrayValue
   const showSelected = showTag && !searchValue && !open
@@ -312,7 +315,7 @@ const ComboboxImpl = <T extends Value = string>(
             {...inputProps}
           />
         </div>
-        {allowClear && controlledValue && (
+        {allowClear && controlledValue && controlledValue !== "" && (
           <button
             type="button"
             onClick={(e) => {

packages/admin/dashboard/src/components/inputs/country-select/country-select.tsx

@@ -10,42 +10,48 @@ import { Combobox } from "../combobox"
 
 export const CountrySelect = forwardRef<
   HTMLInputElement,
-  Omit<ComponentPropsWithoutRef<typeof Combobox>, "options" | "multiple"> & {
+  Omit<
+    ComponentPropsWithoutRef<typeof Combobox>,
+    "options" | "multiple" | "value" | "onChange"
+  > & {
     placeholder?: string
     defaultValue?: string
     allowClear?: boolean
+    value?: string
+    onChange?: (value: string | undefined) => void
   }
->(({ placeholder, defaultValue, allowClear, onChange, value, ...props }, ref) => {
-  const { t } = useTranslation()
-  const innerRef = useRef<HTMLInputElement>(null)
+>(
+  (
+    { placeholder, defaultValue, allowClear, onChange, value, ...props },
+    ref
+  ) => {
+    const { t } = useTranslation()
+    const innerRef = useRef<HTMLInputElement>(null)
 
-  useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)
+    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)
 
-  // Normalize the value: convert to lowercase
-  // Keep empty string as empty string (don't convert to undefined)
-  const normalizedValue = typeof value === "string"
-    ? (value ? value.toLowerCase() : "")
-    : ""
+    // Keep empty string as empty string for Combobox controlled state
+    const normalizedValue = value || ""
 
-  const handleChange = (newValue: string | undefined) => {
-    // Convert undefined to empty string when clearing
-    onChange?.(newValue || "")
-  }
+    const handleChange = (newValue: string | undefined) => {
+      onChange?.(newValue || "")
+    }
 
-  return (
-    <Combobox
-      {...props}
-      ref={innerRef}
-      value={normalizedValue}
-      onChange={handleChange}
-      options={countries.map((country) => ({
-        label: country.display_name,
-        value: country.iso_2.toLowerCase(),
-      }))}
-      placeholder={placeholder || t("fields.selectCountry")}
-      allowClear={allowClear}
-    />
-  )
-})
+    return (
+      <Combobox
+        {...props}
+        ref={innerRef}
+        value={normalizedValue}
+        onChange={handleChange}
+        options={countries.map((country) => ({
+          label: country.display_name,
+          value: country.iso_2.toLowerCase(),
+        }))}
+        placeholder={placeholder || t("fields.selectCountry")}
+        allowClear={allowClear}
+      />
+    )
+  }
+)
 
 CountrySelect.displayName = "CountrySelect"

packages/admin/dashboard/src/routes/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx

@@ -94,7 +94,7 @@ export const ProductCreateOrganizationSection = ({
                 <Form.Control>
                   <Combobox
                     {...field}
-                    value={field.value || undefined}
+                    value={field.value || ""}
                     onChange={(value) => field.onChange(value || "")}
                     options={types.options}
                     searchValue={types.searchValue}
@@ -120,7 +120,7 @@ export const ProductCreateOrganizationSection = ({
                 <Form.Control>
                   <Combobox
                     {...field}
-                    value={field.value || undefined}
+                    value={field.value || ""}
                     onChange={(value) => field.onChange(value || "")}
                     options={collections.options}
                     searchValue={collections.searchValue}

packages/admin/dashboard/src/routes/products/product-organization/components/product-organization-form/product-organization-form.tsx

@@ -123,7 +123,7 @@ export const ProductOrganizationForm = ({
                     <Form.Control>
                       <Combobox
                         {...field}
-                        value={field.value || undefined}
+                        value={field.value || ""}
                         onChange={(value) => field.onChange(value || "")}
                         options={types.options}
                         searchValue={types.searchValue}
@@ -149,7 +149,7 @@ export const ProductOrganizationForm = ({
                     <Form.Control>
                       <Combobox
                         {...field}
-                        value={field.value || undefined}
+                        value={field.value || ""}
                         onChange={(value) => field.onChange(value || "")}
                         multiple={false}
                         options={collections.options}