Problem/Motivation
When using the Layout Paragraphs Builder module, the page unexpectedly scrolls to the top after adding a new component at the bottom of the builder. This disrupts the user experience and requires manual scrolling back to the newly added component.
Steps to reproduce
- Navigate to a page or form using the Layout Paragraphs Builder.
- Add multiple components to the builder until the page has scrollable content.
- Scroll to the bottom of the builder and add a new component.
- Observe that the page scrolls to the top instead of focusing on the newly added component.
Proposed resolution
Introduce a mechanism to scroll to the newly added component automatically after it is inserted. This could be achieved using JavaScript (e.g., scrollIntoView) within the lpb-component:insert.lpb event handler.
Remaining tasks
- Debug the
lpb-component:insert.lpbevent to confirm the cause of the page scroll reset. - Implement the proposed resolution to ensure smooth scrolling to the new component.
- Test the changes in various scenarios with multiple components and deeply nested structures.
User interface changes
Users will experience smoother interactions with the builder as the page focuses on the newly added component.
API changes
None.
Data model changes
None.
Issue fork layout_paragraphs-3493180
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
arthur.baghdasar commentedThis is now working for me and ready for testing.
Comment #4
arthur.baghdasar commentedComment #5
dstorozhukHi @arthur.baghdasar, there some debug artifacts (console.log) left in a code.
Comment #6
dstorozhukI just tested the Layout Paragraphs on fresh Drupal 10.4.1, also on Drupal 10.3.9 installation with Claro 10.4.1 and 10.3.9 - I see no issue with defocusing from newly added component.
Looks like the issue is not related to Layout Paragraphs.
Comment #7
arthur.baghdasar commentedFixed with Sortable JS implementation
Comment #8
arthur.baghdasar commented