Scroll to Top After Adding a New Component in Layout Paragraphs Builder

Created on 11 December 2024, 4 months ago

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

  1. Navigate to a page or form using the Layout Paragraphs Builder.
  2. Add multiple components to the builder until the page has scrollable content.
  3. Scroll to the bottom of the builder and add a new component.
  4. 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.lpb event 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.

πŸ“Œ Task
Status

Active

Version

2.1

Component

User interface

Created by

πŸ‡¦πŸ‡²Armenia arthur.baghdasar

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024