[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.
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