From 8569d8726e01024bae8f4628fdbeeb6ba2b2302c Mon Sep 17 00:00:00 2001 From: Artur Tagisow Date: Wed, 27 Apr 2022 10:43:04 +0200 Subject: [PATCH] fix: product tab click should scroll to tab content M2-514 before this commit, the behavior would scroll in a way that'd make the tab's contents be cut off in the middle, rather than shown fully I suspect this was happening because the process is like this: 1. tabs container has description open (default state) 2. click another tab (eg. "Read reviews" tab) 3. the tab container's DOM size did not update yet, but scrollIntoView({ block: "end" }) is called 4. the tab opens, but the view is scrolled to the end of the OLD size of the tab block (when reviews was open) You could probably do some Vue.$nextTick magic here but it's easier to just scroll to top --- packages/theme/pages/Product.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue index 760d98486..b652990d0 100644 --- a/packages/theme/pages/Product.vue +++ b/packages/theme/pages/Product.vue @@ -444,8 +444,8 @@ export default defineComponent({ const changeTab = (tabNumber, callback) => { document.querySelector('#tabs').scrollIntoView({ + block: 'start', behavior: 'smooth', - block: 'end', }); openTab.value = tabNumber; if (callback && typeof callback === 'function') callback();