fix(scroll): scroll direction inconsistency

[victorcg88]

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:

Screen.Recording.2024-10-01.at.17.43.42.mov

After:

Screen.Recording.2024-10-01.at.17.41.49.mov

Motivation and context

• Dependencies. If any, specify:
• Open issue. If applicable, link:

Type of change

• 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)
• Change requires a documentation update

What is the destination branch of this PR?

• Main
• Other. Specify: https://github.com/empathyco/x/tree/vue3-update-rc

How has this been tested?

Tests performed according to testing guidelines:

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review on my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.