Correctly select RadzenTocItem based on scroll direction in RadzenToc #2370
Conversation
| var resolveCallbacks = []; | ||
| var rejectCallbacks = []; | ||
| var radzenRecognition; | ||
| var selectedNavigationSelector; |
There was a problem hiding this comment.
This should not be a global variable.
| } | ||
| // clear selected navigation selector after scroll completes | ||
| if (selectedNavigationSelector && match === selectedNavigationSelector) { | ||
| debounce(() => { selectedNavigationSelector = undefined; }, 100)(); |
There was a problem hiding this comment.
Why is this needed? I don't follow the logic with selectedNavigationSelector. Keep in mind the window can scroll for various reasons that are currently not handled in code.
There was a problem hiding this comment.
i think it has to do with the issue you mentioned a few hours ago. in the last commit the debounce is removed but that breaks it again.
what i think happens is that it scrolls to the top of the element, passes the anchor, selects it but keeps scrolling the page so the anchor is on the top of the page.
however, the scroll event handler will keep looking and selecting any new selector/element as it scrolls the selection to the top. it then sees and selects the bottom element which is way past the selection.
this is something i myself have noticed with the current implementation as well, but with small content on top of the page and it scrolling to the center.
i think this is also why the selectedNavigationSelector is a global variable, as its set on a selection and cleared once the scroll has ended.
the debounce is basically an emulation of the scroll end event that has been implemented in browsers (in circa 2022 iirc) except safari/webkit...
if scroll end was available, the clearing could be done there, but alas.
or hell, even the selection of the selector could be done there ^^;
|
Just tested your suggestion and it too seems to fail. Try it with the
When I scroll to the first section |
|
hi @akorchev , The code has been updated with changes to address the reload page problem you mentioned, Also the global variable has been removed. |
|
This case indeed works (in the breakpoints page). But I discovered another page that doesn't work: https://localhost:5001/appearance-toggle. Here is a screen recording of the problem I found - clicking an item selects a different item. |
3 participants
This allows the RadzenToc component to look at the bottom/top depending on the scroll direction to decide which radzenTocItem to select.
Implements #2369
I will have a look at the issues in #2328 and #2340