fix(dashboard): allow clearing optional collection, type, and country fields

.changeset/lovely-suns-spend.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+Add ability to clear optional collection, type, and country fields in product and inventory forms

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

@@ -6,48 +6,52 @@ import {
 } from "react"
 import { useTranslation } from "react-i18next"
 import { countries } from "../../../lib/data/countries"
-import { Select } from "@medusajs/ui"
+import { Combobox } from "../combobox"
 
 export const CountrySelect = forwardRef<
-  HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Select> & {
+  HTMLInputElement,
+  Omit<
+    ComponentPropsWithoutRef<typeof Combobox>,
+    "options" | "multiple" | "value" | "onChange"
+  > & {
     placeholder?: string
     defaultValue?: string
-    onChange?: (value: string) => void
+    allowClear?: boolean
+    value?: string
+    onChange?: (value: string | undefined) => void
   }
->(({ disabled, placeholder, defaultValue, onChange, ...field }, ref) => {
-  const { t } = useTranslation()
-  const innerRef = useRef<HTMLButtonElement>(null)
+>(
+  (
+    { placeholder, defaultValue, allowClear, onChange, value, ...props },
+    ref
+  ) => {
+    const { t } = useTranslation()
+    const innerRef = useRef<HTMLInputElement>(null)
 
-  useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement)
-
-  return (
-    <div className="relative">
-      <Select
-        {...field}
-        value={field.value ? field.value?.toLowerCase() : undefined}
-        onValueChange={onChange}
-        defaultValue={defaultValue ? defaultValue.toLowerCase() : undefined}
-        disabled={disabled}
-      >
-        <Select.Trigger ref={innerRef} className="w-full">
-          <Select.Value
-            placeholder={placeholder || t("fields.selectCountry")}
-          />
-        </Select.Trigger>
-        <Select.Content>
-          {countries.map((country) => (
-            <Select.Item
-              key={country.iso_2}
-              value={country.iso_2.toLowerCase()}
-            >
-              {country.display_name}
-            </Select.Item>
-          ))}
-        </Select.Content>
-      </Select>
-    </div>
-  )
-})
+    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)
+
+    // Keep empty string as empty string for Combobox controlled state
+    const normalizedValue = value || ""
+
+    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}
+      />
+    )
+  }
+)
 
 CountrySelect.displayName = "CountrySelect"

packages/admin/dashboard/src/routes/inventory/inventory-create/components/inventory-create-form/inventory-create-form.tsx

@@ -454,7 +454,7 @@ export function InventoryCreateForm({ locations }: InventoryCreateFormProps) {
                               {t("products.fields.countryOrigin.label")}
                             </Form.Label>
                             <Form.Control>
-                              <CountrySelect {...field} />
+                              <CountrySelect {...field} allowClear />
                             </Form.Control>
                           </Form.Item>
                         )

packages/admin/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item-attributes/components/edit-item-attributes-form.tsx

@@ -244,7 +244,7 @@ export const EditInventoryItemAttributesForm = ({
                     {t("fields.countryOfOrigin")}
                   </Form.Label>
                   <Form.Control>
-                    <CountrySelect {...field} />
+                    <CountrySelect {...field} allowClear />
                   </Form.Control>
                   <Form.ErrorMessage />
                 </Form.Item>

packages/admin/dashboard/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx

@@ -420,7 +420,7 @@ export const ProductEditVariantForm = ({
                       {t("fields.countryOfOrigin")}
                     </Form.Label>
                     <Form.Control>
-                      <CountrySelect {...field} />
+                      <CountrySelect {...field} allowClear />
                     </Form.Control>
                     <Form.ErrorMessage />
                   </Form.Item>

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

@@ -246,9 +246,11 @@ export const ProductAttributesForm = ({
                 render={({ field }) => {
                   return (
                     <Form.Item>
-                      <Form.Label>{t("fields.countryOfOrigin")}</Form.Label>
+                      <Form.Label optional>
+                        {t("fields.countryOfOrigin")}
+                      </Form.Label>
                       <Form.Control>
-                        <CountrySelect {...field} />
+                        <CountrySelect {...field} allowClear />
                       </Form.Control>
                       <Form.ErrorMessage />
                     </Form.Item>

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

@@ -29,7 +29,7 @@ export const ProductCreateAttributeSection = ({
                   {t("products.fields.countryOrigin.label")}
                 </Form.Label>
                 <Form.Control>
-                  <CountrySelect {...field} />
+                  <CountrySelect {...field} allowClear />
                 </Form.Control>
               </Form.Item>
             )

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,10 +94,13 @@ export const ProductCreateOrganizationSection = ({
                 <Form.Control>
                   <Combobox
                     {...field}
+                    value={field.value || ""}
+                    onChange={(value) => field.onChange(value || "")}
                     options={types.options}
                     searchValue={types.searchValue}
                     onSearchValueChange={types.onSearchValueChange}
                     fetchNextPage={types.fetchNextPage}
+                    allowClear
                   />
                 </Form.Control>
                 <Form.ErrorMessage />
@@ -117,10 +120,13 @@ export const ProductCreateOrganizationSection = ({
                 <Form.Control>
                   <Combobox
                     {...field}
+                    value={field.value || ""}
+                    onChange={(value) => field.onChange(value || "")}
                     options={collections.options}
                     searchValue={collections.searchValue}
                     onSearchValueChange={collections.onSearchValueChange}
                     fetchNextPage={collections.fetchNextPage}
+                    allowClear
                   />
                 </Form.Control>
                 <Form.ErrorMessage />

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

@@ -123,10 +123,13 @@ export const ProductOrganizationForm = ({
                     <Form.Control>
                       <Combobox
                         {...field}
+                        value={field.value || ""}
+                        onChange={(value) => field.onChange(value || "")}
                         options={types.options}
                         searchValue={types.searchValue}
                         onSearchValueChange={types.onSearchValueChange}
                         fetchNextPage={types.fetchNextPage}
+                        allowClear
                       />
                     </Form.Control>
                     <Form.ErrorMessage />
@@ -146,10 +149,13 @@ export const ProductOrganizationForm = ({
                     <Form.Control>
                       <Combobox
                         {...field}
+                        value={field.value || ""}
+                        onChange={(value) => field.onChange(value || "")}
                         multiple={false}
                         options={collections.options}
                         onSearchValueChange={collections.onSearchValueChange}
                         searchValue={collections.searchValue}
+                        allowClear
                       />
                     </Form.Control>
                     <Form.ErrorMessage />