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 = 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 = props => id: "ccXLVi", defaultMessage: "Category", })} - {...(!categoryInputActive && - !disabled && { - width: "100%", - __opacity: 0, - position: "absolute", - })} + {...(hideInput && { + width: "100%", + __opacity: 0, + position: "absolute", + })} onFocus={() => { setCategoryInputActive(true); }}