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.

Command icon 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

arthur.baghdasar created an issue. See original summary.

arthur.baghdasar’s picture

This is now working for me and ready for testing.

arthur.baghdasar’s picture

Assigned: arthur.baghdasar » Unassigned
Status: Active » Needs review
dstorozhuk’s picture

Hi @arthur.baghdasar, there some debug artifacts (console.log) left in a code.

dstorozhuk’s picture

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

arthur.baghdasar’s picture

Fixed with Sortable JS implementation

arthur.baghdasar’s picture

Status: Needs review » Closed (duplicate)