scroll fix

Author: sf666

frontend/nextcp-ui/src/app/mediaserver/display-container/display-container.component.ts

@@ -293,12 +293,14 @@ export class DisplayContainerComponent {
   }
 
   /**
-   * @param elementID ATTENTION: elementID needs to have tabindex set to '-1': <div id="elementID" tabindex="-1">
+   * Scrolls the element with this id to the top. Like CdsBrowsePathService.scrollIntoViewID, this
+   * scrolls rather than focuses: a focused anchor is handed the focus back by every dialog that
+   * closes afterwards, and the listing jumped to the top with it.
    */
   public scrollIntoViewID(elementID: string): boolean {
-    const targetElement = document.getElementById(elementID); // querySelector('#someElementId');
+    const targetElement = document.getElementById(elementID);
     if (targetElement) {
-      targetElement.focus();
+      targetElement.scrollIntoView({ block: 'start' });
       console.log('scrolled to element ID : ' + elementID);
       return true;
     }

frontend/nextcp-ui/src/app/util/cds-browse-path.service.ts

@@ -64,16 +64,23 @@ export class CdsBrowsePathService {
   public persistPathToRoot(): void {}
 
   /**
-   * @param elementID ATTENTION: elementID needs to have tabindex set to '-1': <div id="elementID" tabindex="-1">
+   * Brings the element with this id to the top of the browse view.
+   *
+   * It used to get there by focusing the element, because focus() scrolls its target into view. That
+   * also left the focus parked on the element - and every dialog opened afterwards handed the focus
+   * back to it when it closed (MatDialog restores focus in ngOnDestroy), which scrolled the listing
+   * to the top again. In a long list that is a jump from wherever the user was to the very first row,
+   * on closing the song options, the rating sheet or the playlist picker. Scrolling directly moves
+   * the listing and nothing else, so there is no focus left behind to come back to.
    */
   public scrollIntoViewID(elementID?: string): void {
     if (!elementID) {
       elementID = this.scrollId();
     }
     console.log('[scroll] to ID : ' + elementID);
-    const targetElement = document.getElementById(elementID); // querySelector('#someElementId');
+    const targetElement = document.getElementById(elementID);
     if (targetElement) {
-      targetElement.focus();
+      targetElement.scrollIntoView({ block: 'start' });
     } else {
       console.log('[scroll] id not found : ' + elementID);
     }