[59769] When adding new relations, auto-scroll to show the newly added relation #17355
Conversation
bsatarnejad
force-pushed
the
59769-when-adding-new-relations-auto-scroll-to-show-the-newly-added-relation
branch
from
8f2522a to
6c71aed
Compare
bsatarnejad
force-pushed
the
59769-when-adding-new-relations-auto-scroll-to-show-the-newly-added-relation
branch
from
34e143b to
8775574
Compare
frontend/src/stimulus/controllers/dynamic/work-packages/relations-tab/scroll.controller.ts
Outdated
Show resolved
Hide resolved
app/components/work_package_relations_tab/index_component.html.erb
Outdated
Show resolved
Hide resolved
|
|
||
| connect() { | ||
| // Wait to ensure DOM is fully loaded | ||
| setTimeout(() => { |
There was a problem hiding this comment.
setTimeout does not automatically ensure you that the DOM is fully loaded afaik, there might still be some delays that could prevent that could from being executed.
| } | ||
|
|
||
| waitForRenderAndAct() { | ||
| const element = document.querySelector('[data-scroll-to="true"]'); |
There was a problem hiding this comment.
I'd recommend to use a stimulus target instead of a normal data attribute. The value is crutial for this controller to work, so it should be an explicit target imho.
| if (element) { | ||
| element.scrollIntoView({ behavior: 'smooth', block: 'center' }); | ||
| } else { | ||
| requestAnimationFrame(this.waitForRenderAndAct.bind(this)); |
There was a problem hiding this comment.
This creates like an infinte loop when there is no scroll target (e.g. on a fresh page reload). The code is just executed endlessly.
Further, requestAnimationFrame is just meant for animations and will execute the code 60 times per second (assuming 60hertz screen), because that makes sense for animations. But you don't have an animation here.
There was a problem hiding this comment.
@bsatarnejad I tried looking into it as you requested. The best I could do is by using a MutationObserver instead of requestAnimationFrame so that it tries to scroll only when things change. Code is on branch 59769-when-adding-new-relations-auto-scroll-to-show-the-newly-added-relation-wip-scbl.
It can probably be optimized further by limiting where it's listening, instead of listening to the whole body.
There was a problem hiding this comment.
Hi @cbliard , @HDinger
@ulferts and I investigated this issue more. The problem arises because a new row is added to the DOM, but it takes additional time to fully render and become visible in the view. As a result, we can't scroll to it immediately and need to use a timeout to give the Turbo.renderStream method enough time to render the new row.
Jonas encountered a similar issue in the activities tab: https://github.com/opf/openproject/blob/dev/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts#L213-L224
HDinger
deleted the
59769-when-adding-new-relations-auto-scroll-to-show-the-newly-added-relation
branch
Ticket
https://community.openproject.org/projects/stream-planning-and-reporting/work_packages/59769/activity
Screen recording
Screen.Recording.2024-12-04.at.16.44.53.mov
What are you trying to accomplish?
Scroll to the currently created relation in relations tab.
What approach did you choose and why?
After creating a relation, pass the relation-wp-id to the component for initializing it.
Merge checklist