Fix showing empty category input (#5090)

* Fix showing empty category input * Add changelog
saleor · Aug 5, 2024 · 508e53e · 508e53e
1 parent d29c3f8
commit 508e53e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/.changeset/wet-ties-perform.md b/.changeset/wet-ties-perform.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Category input in product page is no longer collapsed when empty
diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx
@@ -79,6 +79,10 @@ export const ProductOrganization: React.FC<ProductOrganizationProps> = props =>
     errors,
   );
   const [categoryInputActive, setCategoryInputActive] = React.useState(false);
+
+  // Input is hide to proper handle showing nested category structure
+  const hideInput = !categoryInputActive && data.category && !disabled;
+
   const noCategoryError =
     formErrors.isPublished?.code === ProductErrorCode.PRODUCT_WITHOUT_CATEGORY
       ? formErrors.isPublished
@@ -161,12 +165,11 @@ export const ProductOrganization: React.FC<ProductOrganizationProps> = props =>
               id: "ccXLVi",
               defaultMessage: "Category",
             })}
-            {...(!categoryInputActive &&
-              !disabled && {
-                width: "100%",
-                __opacity: 0,
-                position: "absolute",
-              })}
+            {...(hideInput && {
+              width: "100%",
+              __opacity: 0,
+              position: "absolute",
+            })}
             onFocus={() => {
               setCategoryInputActive(true);
             }}