After the Vue3 upgrade the `useScroll` composable created a inconsistency in the scroll direction prop in the `useScroll` instance and the scroll direction prop in the Vuex store.
## Explanation:
When scrolling, the data in `useScroll` is updated via the `storeScrollData` method, which updates values on `currentPosition` and `clientHeight`. For the first scroll event, the behavior is described below:
In **Vue2** the running order was:
1. Callback of `clientHeight` watch, which blocks updates on scroll direction because `isClientHeightChanging` is set to `true`.
2. Callback of `currentPosition` watch, skipped due to `isClientHeightChanging` = true.
But in **Vue3** the running order is:
1. Callback of `currentPosition` watch, because in the running order of `storeScrollData` currentPosition is mutated first. Then `isClientHeightChanging` is false, so it mutates `scrollDirection`
2. Callback of `clientHeight` watch, which blocks updates on scroll direction because `isClientHeightChanging` is set to `true`.
3. Callback of `scrollDirection` watch, skipped due to `isClientHeightChanging` = true. So the event is not emitted and the store keeps the original value not the current one.
## Consequences:
In the x-archetype, it is used the `useHasScrollPastThreshold` composable which relies on the scroll direction of the store. It is used in this case to collapse the subheader of the desktop and mobile layouts. Those subheaders were not hidden due to this bug.
## How it is fixed:
Changing the running order of the `storeScrollData` mutating first the `clientHeight`, it is ensured that the data is consistent between the composable and the store.
**Before:**
https://github.com/user-attachments/assets/6c3605df-97cf-4188-b07d-104c4f8ab1df
**After:**
https://github.com/user-attachments/assets/82cefb86-5d9a-4211-b857-0e7423b736a1
## Motivation and context
[ ] Dependencies. If any, specify:
[ ] Open issue. If applicable, link:
Type of change
[X] Bug fix (non-breaking change that fixes an issue)
[ ] New feature (non-breaking change that adds functionality)
[ ] Breaking change (fix or feature that causes existing functionality to not work as expected)
Pull request template
After the Vue3 upgrade the `useScroll` composable created a inconsistency in the scroll direction prop in the `useScroll` instance and the scroll direction prop in the Vuex store. ## Explanation: When scrolling, the data in `useScroll` is updated via the `storeScrollData` method, which updates values on `currentPosition` and `clientHeight`. For the first scroll event, the behavior is described below: In **Vue2** the running order was: 1. Callback of `clientHeight` watch, which blocks updates on scroll direction because `isClientHeightChanging` is set to `true`. 2. Callback of `currentPosition` watch, skipped due to `isClientHeightChanging` = true. But in **Vue3** the running order is: 1. Callback of `currentPosition` watch, because in the running order of `storeScrollData` currentPosition is mutated first. Then `isClientHeightChanging` is false, so it mutates `scrollDirection` 2. Callback of `clientHeight` watch, which blocks updates on scroll direction because `isClientHeightChanging` is set to `true`. 3. Callback of `scrollDirection` watch, skipped due to `isClientHeightChanging` = true. So the event is not emitted and the store keeps the original value not the current one. ## Consequences: In the x-archetype, it is used the `useHasScrollPastThreshold` composable which relies on the scroll direction of the store. It is used in this case to collapse the subheader of the desktop and mobile layouts. Those subheaders were not hidden due to this bug. ## How it is fixed: Changing the running order of the `storeScrollData` mutating first the `clientHeight`, it is ensured that the data is consistent between the composable and the store. **Before:** https://github.com/user-attachments/assets/6c3605df-97cf-4188-b07d-104c4f8ab1df **After:** https://github.com/user-attachments/assets/82cefb86-5d9a-4211-b857-0e7423b736a1 ## Motivation and contextType of change
What is the destination branch of this PR?
MainHow has this been tested?
Tests performed according to testing guidelines:
Checklist: