From c7c032216377d7bb346579b18e735a3a3b79dda6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Wed, 21 Dec 2022 14:47:13 -0300 Subject: [PATCH] Persist active tab on refresh (#36112) --- .../client/products/layout/product-form-layout.tsx | 11 ++++++++++- plugins/woocommerce/changelog/add-36061 | 4 ++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce/changelog/add-36061 diff --git a/plugins/woocommerce-admin/client/products/layout/product-form-layout.tsx b/plugins/woocommerce-admin/client/products/layout/product-form-layout.tsx index f801958d191..38b4d237cc4 100644 --- a/plugins/woocommerce-admin/client/products/layout/product-form-layout.tsx +++ b/plugins/woocommerce-admin/client/products/layout/product-form-layout.tsx @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { Children, useEffect } from '@wordpress/element'; import { TabPanel, Tooltip } from '@wordpress/components'; +import { navigateTo, getNewPath, getQuery } from '@woocommerce/navigation'; /** * Internal dependencies @@ -14,6 +15,8 @@ import { ProductFormTab } from '../product-form-tab'; export const ProductFormLayout: React.FC< { children: JSX.Element | JSX.Element[]; } > = ( { children } ) => { + const query = getQuery() as Record< string, string >; + useEffect( () => { window.document.body.classList.add( 'woocommerce-admin-product-layout' @@ -63,7 +66,13 @@ export const ProductFormLayout: React.FC< { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore Disabled properties will be included in newer versions of Gutenberg. tabs={ tabs } - onSelect={ () => ( window.document.documentElement.scrollTop = 0 ) } + initialTabName={ query.tab ?? tabs[ 0 ].name } + onSelect={ ( tabName: string ) => { + window.document.documentElement.scrollTop = 0; + navigateTo( { + url: getNewPath( { tab: tabName } ), + } ); + } } > { ( tab ) => ( <> diff --git a/plugins/woocommerce/changelog/add-36061 b/plugins/woocommerce/changelog/add-36061 new file mode 100644 index 00000000000..d8e750c274d --- /dev/null +++ b/plugins/woocommerce/changelog/add-36061 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Persist active tab on refresh