column switch and focus sync

package-lock.json

@@ -2742,6 +2742,11 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.11.tgz",
+      "integrity": "sha512-uUnglJowSe0IPmWOdDtrlHXof5CTIJitfJEyITHBW6zDVOGu9Pjk5puaLM73SLcwak0L4hEjO7Td88/a6P5i7A=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -10321,6 +10326,14 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.20",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.20.tgz",
+      "integrity": "sha512-P9kYMrhi9f6dvWwTGpO5I3HgjSU/8Mts7xL3lkoH5xlewK7O9Obdc5WmMCzppln7bCVGNmf3qfoZXrpCeyNJXw==",
+      "requires": {
+        "compute-scroll-into-view": "1.0.11"
+      }
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -10638,6 +10651,14 @@
       "integrity": "sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==",
       "dev": true
     },
+    "smooth-scroll-into-view-if-needed": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.23.tgz",
+      "integrity": "sha512-52177sj5yR2novVCB+vJRCYEUkHFz2mq5UKmm5wwIWs0ZtC1sotVaTjKBsuNzBPF4nOV1NxMctyD4V/VMmivCQ==",
+      "requires": {
+        "scroll-into-view-if-needed": "2.2.20"
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

package.json

@@ -52,6 +52,7 @@
         "ng-pick-datetime": "^7.0.0",
         "ngx-contextmenu": "^5.2.0",
         "rxjs": "^6.4.0",
+        "smooth-scroll-into-view-if-needed": "^1.1.23",
         "tslib": "^1.9.0",
         "zone.js": "^0.8.29"
     },

src/app/components/stream/stream-statuses/stream-statuses.component.ts

@@ -277,7 +277,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         setTimeout(() => {
             var element = this.statustream.nativeElement as HTMLElement;
             element.focus();
-        }, 500);
+        }, 0);
         return false;
     }
 

src/app/components/stream/stream.component.ts

@@ -61,7 +61,9 @@ export class StreamComponent implements OnInit {
     }
 
     focus(): boolean {
-        this.streamStatusesComponent.focus();
+        if (!this.overlayActive) {
+            this.streamStatusesComponent.focus();
+        }
         return false;
     }
 

src/app/pages/streams-main-display/streams-main-display.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, OnDestroy, QueryList, ViewChildren, ElementRef } from "@angular/core";
 import { Observable, Subscription } from "rxjs";
 import { Select } from "@ngxs/store";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 
 import { StreamElement } from "../../states/streams.state";
 import { NavigationService } from "../../services/navigation.service";
@@ -35,11 +36,21 @@ export class StreamsMainDisplayComponent implements OnInit, OnDestroy {
     private focusOnColumn(columnIndex: number): void {
         if (columnIndex > -1) {
             setTimeout(() => {
-                this.streamsElementRef.toArray()[columnIndex].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                let element = this.streamsElementRef.toArray()[columnIndex].nativeElement;
+                element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+
+                const scrolling = <Promise<any>><any>scrollIntoView(element, { behavior: 'smooth', block: 'nearest'});
+                scrolling
+                    .then(() => {
+                        this.streamComponents.toArray()[columnIndex].focus();
+                    });
+
+                // setTimeout(() => {
+                //     this.streamComponents.toArray()[columnIndex].focus();
+                // }, 500);
+            }, 0);
+
 
-                console.warn(this.streamComponents);
-                this.streamComponents.toArray()[columnIndex].focus();
-            });
         }
     }
-}
+}