From 508e53e6f27bf78550b71d01d949a337d14b3458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Fri, 2 Aug 2024 13:54:36 +0200
Subject: [PATCH] Fix showing empty category input (#5090)

* Fix showing empty category input

* Add changelog
---
 .changeset/wet-ties-perform.md                    |  5 +++++
 .../ProductOrganization/ProductOrganization.tsx   | 15 +++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/wet-ties-perform.md

diff --git a/.changeset/wet-ties-perform.md b/.changeset/wet-ties-perform.md
new file mode 100644
index 00000000000..dd3ca88f684
--- /dev/null
+++ 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
index ed7b6c79c04..5aae04bc815 100644
--- 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);
             }}