From e26e61875b6108010c8ac3bcfcb8b5ed8022e149 Mon Sep 17 00:00:00 2001
From: Abhishek Negi <negiabhishek253@gmail.com>
Date: Tue, 19 Mar 2024 11:33:04 +0530
Subject: [PATCH 1/9] added drag functionality in admin tabs

---
 .../admin-tabs/admin-tabs.component.html      | 33 ++++++++++++-------
 .../admin-tabs/admin-tabs.component.scss      |  6 ++++
 .../admin-tabs/admin-tabs.component.ts        | 18 ++++++++++
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
index 2e5b7e90cc..10a050db96 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
@@ -1,17 +1,28 @@
 <mat-tab-group [preserveContent]="true" #matTabGroup>
   <mat-tab *ngFor="let tab of tabs; index as tabIndex">
     <ng-template mat-tab-label>
-      @if (tabIndex === matTabGroup.selectedIndex) {
-        <app-admin-section-header
-          [(title)]="tab['title'] ?? tab['name']"
-          (remove)="
-            tabs.splice(tabIndex, 1); matTabGroup.selectedIndex = tabIndex - 1
-          "
-        ></app-admin-section-header>
-      } @else {
-        <!-- only current tab can be renamed -->
-        {{ tab["title"] ?? tab["name"] }}
-      }
+      <div
+        [id]="'tabs-' + tabIndex"
+        cdkDropList
+        cdkDropListOrientation="horizontal"
+        (cdkDropListDropped)="dropStep($event)"
+        [cdkDropListConnectedTo]="getAllTabs(tabIndex)"
+      >
+        <div cdkDrag >
+        <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
+        @if (tabIndex === matTabGroup.selectedIndex) {
+          <app-admin-section-header
+            [(title)]="tab['title'] ?? tab['name']"
+            (remove)="
+              tabs.splice(tabIndex, 1); matTabGroup.selectedIndex = tabIndex - 1
+            "
+          ></app-admin-section-header>
+        } @else {
+          <!-- only current tab can be renamed -->
+          {{ tab["title"] ?? tab["name"] }}
+        }
+        </div>
+      </div>
     </ng-template>
 
     <ng-template matTabContent>
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss
index 1c7e1539cd..7edc740aad 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss
@@ -1,3 +1,4 @@
+@use "variables/colors";
 
 :host ::ng-deep .mat-mdc-tab {
   // adjust tab header height to properly display mat-form-field for editing tab label
@@ -6,3 +7,8 @@
 app-admin-section-header {
   margin-bottom: -1em;
 }
+.drag-handle {
+  cursor: move;
+  margin: auto;
+  color: colors.$accent;
+}
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index 831c3468d7..feeb699468 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -19,6 +19,7 @@ import {
 } from "@angular/material/tabs";
 import { MatTooltip } from "@angular/material/tooltip";
 import { AdminTabTemplateDirective } from "./admin-tab-template.directive";
+import { CdkDragDrop, moveItemInArray, DragDropModule } from "@angular/cdk/drag-drop";
 
 /**
  * Building block for drag&drop form builder to let an admin user manage multiple tabs.
@@ -50,6 +51,7 @@ import { AdminTabTemplateDirective } from "./admin-tab-template.directive";
     MatTabLabel,
     MatTooltip,
     AdminTabTemplateDirective,
+    DragDropModule,
   ],
   templateUrl: "./admin-tabs.component.html",
   styleUrl: "./admin-tabs.component.scss",
@@ -76,4 +78,20 @@ export class AdminTabsComponent<
       this.tabGroup.focusTab(newTabIndex);
     });
   }
+  getAllTabs(index){
+    var allTabs = [];
+    for(var i=0; i < this.tabs?.length; i++){
+      if(i != index){
+        allTabs.push("tabs-" + i);
+      }
+    }
+  
+    return allTabs;
+  }
+  
+  dropStep(event: CdkDragDrop<string[]>) {
+    const previousIndex = parseInt(event.previousContainer.id.replace("tabs-",""));
+    const currentIndex = parseInt(event.container.id.replace("tabs-",""));
+    moveItemInArray(this.tabs, previousIndex, currentIndex);
+  }
 }

From b1e33c45f5694bc05ba17d7b4250fdce5948511e Mon Sep 17 00:00:00 2001
From: Abhishek Negi <negiabhishek253@gmail.com>
Date: Wed, 20 Mar 2024 12:44:24 +0530
Subject: [PATCH 2/9] minor changes: added preetier fix

---
 .../admin-tabs/admin-tabs.component.html         |  2 +-
 .../admin-tabs/admin-tabs.component.ts           | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
index 10a050db96..7ee772ae13 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
@@ -5,7 +5,7 @@
         [id]="'tabs-' + tabIndex"
         cdkDropList
         cdkDropListOrientation="horizontal"
-        (cdkDropListDropped)="dropStep($event)"
+        (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="getAllTabs(tabIndex)"
       >
         <div cdkDrag >
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index feeb699468..78c5e8441b 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -78,20 +78,20 @@ export class AdminTabsComponent<
       this.tabGroup.focusTab(newTabIndex);
     });
   }
-  getAllTabs(index){
+  getAllTabs(index) {
     var allTabs = [];
-    for(var i=0; i < this.tabs?.length; i++){
-      if(i != index){
+    for (var i = 0; i < this.tabs?.length; i++) {
+      if (i != index) {
         allTabs.push("tabs-" + i);
       }
     }
-  
+
     return allTabs;
   }
-  
-  dropStep(event: CdkDragDrop<string[]>) {
-    const previousIndex = parseInt(event.previousContainer.id.replace("tabs-",""));
-    const currentIndex = parseInt(event.container.id.replace("tabs-",""));
+
+  drop(event: CdkDragDrop<string[]>) {
+    const previousIndex = parseInt(event.previousContainer.id.replace("tabs-", ""));
+    const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
     moveItemInArray(this.tabs, previousIndex, currentIndex);
   }
 }

From 13e4e0864e455d1253c57da6b4c1a4ea954f23a7 Mon Sep 17 00:00:00 2001
From: Abhishek Negi <negiabhishek253@gmail.com>
Date: Wed, 20 Mar 2024 13:09:12 +0530
Subject: [PATCH 3/9] fixed the rendering bug

---
 .../admin/building-blocks/admin-tabs/admin-tabs.component.ts    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index 78c5e8441b..21c5218ce6 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -93,5 +93,7 @@ export class AdminTabsComponent<
     const previousIndex = parseInt(event.previousContainer.id.replace("tabs-", ""));
     const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
     moveItemInArray(this.tabs, previousIndex, currentIndex);
+    let tab = JSON.stringify(this.tabs);
+    this.tabs = JSON.parse(tab);// Needed to avoid Angular Ivy render bug
   }
 }

From 94717ac9074a0f1fe5be6909a7d5a1d052bf5ce4 Mon Sep 17 00:00:00 2001
From: Abhishek Negi <negiabhishek253@gmail.com>
Date: Wed, 20 Mar 2024 13:16:02 +0530
Subject: [PATCH 4/9] preetier fixed

---
 .../admin/building-blocks/admin-tabs/admin-tabs.component.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index 21c5218ce6..c078fca964 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -90,8 +90,8 @@ export class AdminTabsComponent<
   }
 
   drop(event: CdkDragDrop<string[]>) {
-    const previousIndex = parseInt(event.previousContainer.id.replace("tabs-", ""));
-    const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
+    const previousIndex = parseInt(event.previousContainer.id.replace("tabs-", ""), 10);
+    const currentIndex = parseInt(event.container.id.replace("tabs-", ""), 10);
     moveItemInArray(this.tabs, previousIndex, currentIndex);
     let tab = JSON.stringify(this.tabs);
     this.tabs = JSON.parse(tab);// Needed to avoid Angular Ivy render bug

From 707324421f26f33ca76dddb9677fd99e6cbb2cfe Mon Sep 17 00:00:00 2001
From: Abhishek Negi <negiabhishek253@gmail.com>
Date: Wed, 20 Mar 2024 14:03:03 +0530
Subject: [PATCH 5/9] fixed lint errors

---
 .../admin-tabs/admin-tabs.component.html      | 27 ++++++++++---------
 .../admin-tabs/admin-tabs.component.ts        | 14 +++++++---
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
index 7ee772ae13..b5c6248240 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
@@ -8,19 +8,20 @@
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="getAllTabs(tabIndex)"
       >
-        <div cdkDrag >
-        <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
-        @if (tabIndex === matTabGroup.selectedIndex) {
-          <app-admin-section-header
-            [(title)]="tab['title'] ?? tab['name']"
-            (remove)="
-              tabs.splice(tabIndex, 1); matTabGroup.selectedIndex = tabIndex - 1
-            "
-          ></app-admin-section-header>
-        } @else {
-          <!-- only current tab can be renamed -->
-          {{ tab["title"] ?? tab["name"] }}
-        }
+        <div cdkDrag>
+          <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
+          @if (tabIndex === matTabGroup.selectedIndex) {
+            <app-admin-section-header
+              [(title)]="tab['title'] ?? tab['name']"
+              (remove)="
+                tabs.splice(tabIndex, 1);
+                matTabGroup.selectedIndex = tabIndex - 1
+              "
+            ></app-admin-section-header>
+          } @else {
+            <!-- only current tab can be renamed -->
+            {{ tab["title"] ?? tab["name"] }}
+          }
         </div>
       </div>
     </ng-template>
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index c078fca964..8b0edcc494 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -19,7 +19,11 @@ import {
 } from "@angular/material/tabs";
 import { MatTooltip } from "@angular/material/tooltip";
 import { AdminTabTemplateDirective } from "./admin-tab-template.directive";
-import { CdkDragDrop, moveItemInArray, DragDropModule } from "@angular/cdk/drag-drop";
+import {
+  CdkDragDrop,
+  moveItemInArray,
+  DragDropModule,
+} from "@angular/cdk/drag-drop";
 
 /**
  * Building block for drag&drop form builder to let an admin user manage multiple tabs.
@@ -90,10 +94,12 @@ export class AdminTabsComponent<
   }
 
   drop(event: CdkDragDrop<string[]>) {
-    const previousIndex = parseInt(event.previousContainer.id.replace("tabs-", ""), 10);
-    const currentIndex = parseInt(event.container.id.replace("tabs-", ""), 10);
+    const previousIndex = parseInt(
+      event.previousContainer.id.replace("tabs-", ""),
+    );
+    const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
     moveItemInArray(this.tabs, previousIndex, currentIndex);
     let tab = JSON.stringify(this.tabs);
-    this.tabs = JSON.parse(tab);// Needed to avoid Angular Ivy render bug
+    this.tabs = JSON.parse(tab); // Needed to avoid Angular Ivy render bug
   }
 }

From 10de82734b05cb6f94a5a09e06581d84fd3cecd6 Mon Sep 17 00:00:00 2001
From: Abhishek Negi <negiabhishek253@gmail.com>
Date: Wed, 20 Mar 2024 17:56:14 +0530
Subject: [PATCH 6/9] feedback resolved

---
 .../building-blocks/admin-tabs/admin-tabs.component.html    | 6 +++++-
 .../building-blocks/admin-tabs/admin-tabs.component.ts      | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
index b5c6248240..cbd93d5b47 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
@@ -8,7 +8,11 @@
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="getAllTabs(tabIndex)"
       >
-        <div cdkDrag>
+        <div
+          cdkDrag
+          cdkDragLockAxis="x"
+          class="flex-row align-center gap-small"
+        >
           <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
           @if (tabIndex === matTabGroup.selectedIndex) {
             <app-admin-section-header
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index 8b0edcc494..f6393b7cc9 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -99,6 +99,10 @@ export class AdminTabsComponent<
     );
     const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
     moveItemInArray(this.tabs, previousIndex, currentIndex);
+    if (this.tabGroup.selectedIndex !== currentIndex) {
+      this.tabGroup.selectedIndex = currentIndex;
+      this.tabGroup.focusTab(currentIndex);
+    }
     let tab = JSON.stringify(this.tabs);
     this.tabs = JSON.parse(tab); // Needed to avoid Angular Ivy render bug
   }

From 39765eda9baec45f3fa8daa2f84b4d2da2e553a0 Mon Sep 17 00:00:00 2001
From: Abhishek Negi <negiabhishek253@gmail.com>
Date: Fri, 22 Mar 2024 17:00:27 +0530
Subject: [PATCH 7/9] updated drop preview css

---
 .../admin-tabs/admin-tabs.component.html      |  3 ++-
 .../admin-tabs/admin-tabs.component.scss      | 20 +++++++++++++++++++
 .../admin-tabs/admin-tabs.component.ts        |  3 ++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
index cbd93d5b47..3814609a96 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
@@ -2,6 +2,7 @@
   <mat-tab *ngFor="let tab of tabs; index as tabIndex">
     <ng-template mat-tab-label>
       <div
+        class="drop-list"
         [id]="'tabs-' + tabIndex"
         cdkDropList
         cdkDropListOrientation="horizontal"
@@ -11,7 +12,7 @@
         <div
           cdkDrag
           cdkDragLockAxis="x"
-          class="flex-row align-center gap-small"
+          class="flex-row align-center drop-item gap-small"
         >
           <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
           @if (tabIndex === matTabGroup.selectedIndex) {
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss
index 7edc740aad..440f2af370 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss
@@ -12,3 +12,23 @@ app-admin-section-header {
   margin: auto;
   color: colors.$accent;
 }
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.drop-list.cdk-drop-list-dragging .drop-item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index f6393b7cc9..673ecc94b5 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -98,8 +98,9 @@ export class AdminTabsComponent<
       event.previousContainer.id.replace("tabs-", ""),
     );
     const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
+    const wasSelectedTabActive = this.tabGroup.selectedIndex === previousIndex;
     moveItemInArray(this.tabs, previousIndex, currentIndex);
-    if (this.tabGroup.selectedIndex !== currentIndex) {
+    if (wasSelectedTabActive || currentIndex === this.tabGroup.selectedIndex) {
       this.tabGroup.selectedIndex = currentIndex;
       this.tabGroup.focusTab(currentIndex);
     }

From 514354cccffd5df5f9a926181a955633414504ff Mon Sep 17 00:00:00 2001
From: Sebastian Leidig <sebastian@aam-digital.com>
Date: Tue, 26 Mar 2024 14:06:20 +0100
Subject: [PATCH 8/9] adjust preview location to be horizontal shift

---
 .../admin/building-blocks/admin-tabs/admin-tabs.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
index 3814609a96..8917d70ce5 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
@@ -2,7 +2,7 @@
   <mat-tab *ngFor="let tab of tabs; index as tabIndex">
     <ng-template mat-tab-label>
       <div
-        class="drop-list"
+        class="drop-list flex-row"
         [id]="'tabs-' + tabIndex"
         cdkDropList
         cdkDropListOrientation="horizontal"

From 2237cedff3e7418a30699ef17667d4c11be5355e Mon Sep 17 00:00:00 2001
From: Sebastian Leidig <sebastian@aam-digital.com>
Date: Tue, 26 Mar 2024 14:14:41 +0100
Subject: [PATCH 9/9] correct re-selection of selected tab

---
 .../admin-tabs/admin-tabs.component.ts        | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index 673ecc94b5..31ca719e33 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -21,8 +21,8 @@ import { MatTooltip } from "@angular/material/tooltip";
 import { AdminTabTemplateDirective } from "./admin-tab-template.directive";
 import {
   CdkDragDrop,
-  moveItemInArray,
   DragDropModule,
+  moveItemInArray,
 } from "@angular/cdk/drag-drop";
 
 /**
@@ -82,9 +82,15 @@ export class AdminTabsComponent<
       this.tabGroup.focusTab(newTabIndex);
     });
   }
-  getAllTabs(index) {
-    var allTabs = [];
-    for (var i = 0; i < this.tabs?.length; i++) {
+
+  /**
+   * A list of tab element ids required for linking drag&drop targets
+   * due to the complex template of tab headers.
+   * @param index
+   */
+  getAllTabs(index: number) {
+    const allTabs = [];
+    for (let i = 0; i < this.tabs?.length; i++) {
       if (i != index) {
         allTabs.push("tabs-" + i);
       }
@@ -98,13 +104,18 @@ export class AdminTabsComponent<
       event.previousContainer.id.replace("tabs-", ""),
     );
     const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
-    const wasSelectedTabActive = this.tabGroup.selectedIndex === previousIndex;
+
+    const previouslySelectedTab = this.tabs[this.tabGroup.selectedIndex];
+
     moveItemInArray(this.tabs, previousIndex, currentIndex);
-    if (wasSelectedTabActive || currentIndex === this.tabGroup.selectedIndex) {
-      this.tabGroup.selectedIndex = currentIndex;
-      this.tabGroup.focusTab(currentIndex);
+
+    // re-select the previously selected tab, even after its index shifted
+    let shiftedSelectedIndex = this.tabs.indexOf(previouslySelectedTab);
+    if (shiftedSelectedIndex !== this.tabGroup.selectedIndex) {
+      this.tabGroup.selectedIndex = shiftedSelectedIndex;
+      this.tabGroup.focusTab(shiftedSelectedIndex);
     }
-    let tab = JSON.stringify(this.tabs);
-    this.tabs = JSON.parse(tab); // Needed to avoid Angular Ivy render bug
+
+    this.tabs = JSON.parse(JSON.stringify(this.tabs)); // Needed to avoid Angular Ivy render bug
   }
 }