[PAGES-970] Editing or creating a new component jumps to the top of the page sometimes Created: 12/Dec/22  Updated: 24/Feb/23  Resolved: 15/Feb/23

Status: Closed
Project: Magnolia pages module
Component/s: Editor Widget
Affects Version/s: 6.2.24
Fix Version/s: 6.3.0, 6.2.25

Type: Bug Priority: Neutral
Reporter: Roberto Gaona Assignee: Thuy To
Resolution: Fixed Votes: 1
Labels: None
Σ Remaining Estimate: 0d Remaining Estimate: 0d
Σ Time Spent: 7d 2.25h Time Spent: 7d 2.25h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Issue Links:
Problem/Incident
Relates
relates to PAGES-1067 Page editor always scrolls to top whe... Closed
causality
duplicate
duplicates PAGES-703 after "duplicate component" action, v... Closed
relation
Sub-Tasks:
Key
Summary
Type
Status
Assignee
PAGES-1032 QA Sub-task Closed Lam Nguyen Bao  
PAGES-1034 Fixing on duplicate, copy and paste c... Sub-task Completed Thuy To  
PAGES-1046 QA Sub-task Closed Miguel Martinez  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[X]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Release notes required:
Yes
Date of First Response:
Epic Link: AuthorX Support
Sprint: AuthX 27, AuthX 28
Story Points: 3
Team: AuthorX
Work Started:

 Description   

Steps to reproduce

This behaviour can be reproduced on the demo page by doing the following:

  • Add a new component to the bottom of the page (scroll there first).
  • You won't be displaced to the top afterwards (until here, everything is expected).
  • Create a new element following the latest one (I was testing with HTML elements)

Expected results

As on the first created component, remaining on the newly created element would be the expected result.

Actual results

On the second created component (and subsequents) the view on the iframe is reset to being at the top of the screen.

Additional notes

This behavior, jumping to the top of the page, actually happens with several actions:

  • creating a second component at the bottom of the page
  • duplicate component action
  • copy and paste component  

We should test all scenarios to ensure the behaviour is consistent for the authors 

Workaround

Development notes

  • A similar issue was PAGES-528, fixed in Magnolia 6.2.14. Customer also comments that this may be related to the shadow DOM and provided a small component example on the related ticket:
<script type="module" src="https://cms-components.dev.fe.union-investment.de/test_UMAGDXC-2631-magnolia-test-web-component/union-investment-cms-components/union-investment-cms-components.esm.js">
<ui-cms-test-component delay='5000' pixel='500'><p>Here is some Text</p></ui-cms-test-component>  
  • Test that the expected behavior is correct also with the Duplicate Component action PAGES-703
  • Test fix against SPA too 


 Comments   
Comment by Christopher Chard [ 11/Jan/23 ]

Hi rgaona,
thank you for creating this issue that fillsinger described. This is really hurting our editors in their day to day work. And also for us it happens every single time, not sometimes.
I have asked the UX team to find a way to prioritize this issue
Cheers & thanks so much for your help!
Chris

Comment by Laura Delnevo [ 11/Jan/23 ]

Hey cchard, Laura here. Thanks for the ping. This is not our highest priority atm. The team if focusing on some Campaign Publisher issues for Support during the next sprint. But let me see, if I can maybe get someone to look at it in the first half of Feb. If nothing more urgent comes in, I will keep this request in mind.

Comment by Marvin Kerkhoff [ 11/Jan/23 ]
[#if cmsfn.isEditMode()]
    <script>
        function elementReady(selector) {
          return new Promise((resolve, reject) => {
            let el = document.querySelector(selector);
            if (el) {resolve(el);}
            new MutationObserver((mutationRecords, observer) => {
              // Query for elements matching the specified selector
              Array.from(document.querySelectorAll(selector)).forEach((element) => {
                resolve(element);
                //Once we have resolved we don't need the observer anymore.
                observer.disconnect();
              });
            })
              .observe(document.documentElement, {
                childList: true,
                subtree: true
              });
          });
        }
        
        
        elementReady('.mgnlEditorBar.mgnlEditor.component.focus').then((someWidget)=>{someWidget.scrollIntoView(); });
    </script> 
[/#if]

This should probably help, but it's a workaround not a completed solution.

Comment by Carlos Cantalapiedra [ 07/Feb/23 ]

A simple way to reproduce it is to create a new component at the bottom of the page (e.g, at https://demoauthor.magnolia-cms.com/.magnolia/admincentral#app:pages-app:detail;/sportstation/about:edit). Once you save it, you are moved to the top. But if you edit that very same component, then it keeps you one the proper location.

So looks like creating a component push you to the top while duplicating / editing keeps you one the correct scroll location.

Generated at Mon Feb 12 06:23:54 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.