From bb745671365822ce7ba7753072502a4cf92830e1 Mon Sep 17 00:00:00 2001
From: nmd <ndanger61@gmail.com>
Date: Tue, 1 Jun 2021 17:41:28 +0100
Subject: [PATCH] Adjust selected tab after popout

---
 ChangeLog.txt      |  3 +++
 package.json       |  2 +-
 src/model/Model.ts |  3 +++
 src/model/Utils.ts | 42 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/ChangeLog.txt b/ChangeLog.txt
index 946087ce..d911d940 100644
--- a/ChangeLog.txt
+++ b/ChangeLog.txt
@@ -1,3 +1,6 @@
+0.5.10
+Adjust selected tab when tabs popped out to an external window
+
 0.5.9
 TitleFactory can now return object with titleContent and name (name is used for tab overflow menu).
 Corrected position of rootOrientationVertical in typescript json model
diff --git a/package.json b/package.json
index 5adf91cf..7a74d737 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.5.9",
+    "version": "0.5.10",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
diff --git a/src/model/Model.ts b/src/model/Model.ts
index 4c2e9246..79df1483 100755
--- a/src/model/Model.ts
+++ b/src/model/Model.ts
@@ -15,6 +15,7 @@ import Node from "./Node";
 import RowNode from "./RowNode";
 import TabNode from "./TabNode";
 import TabSetNode from "./TabSetNode";
+import { adjustSelectedIndexAfterDock, adjustSelectedIndexAfterFloat } from "./Utils";
 
 /** @hidden @internal */
 export interface ILayoutMetrics {
@@ -260,6 +261,7 @@ class Model {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
                     node._setFloating(true);
+                    adjustSelectedIndexAfterFloat(node);
                 }
                 break;
             }
@@ -267,6 +269,7 @@ class Model {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
                     node._setFloating(false);
+                    adjustSelectedIndexAfterDock(node);
                 }
                 break;
             }
diff --git a/src/model/Utils.ts b/src/model/Utils.ts
index 14a5d1c1..cf4ac9a2 100644
--- a/src/model/Utils.ts
+++ b/src/model/Utils.ts
@@ -1,6 +1,48 @@
 import TabSetNode from "./TabSetNode";
 import BorderNode from "./BorderNode";
 import RowNode from "./RowNode";
+import TabNode from "./TabNode";
+
+/** @hidden @internal */
+export function adjustSelectedIndexAfterFloat(node: TabNode) {
+    const parent = node.getParent();
+    if (parent !== null) {
+        if (parent instanceof TabSetNode) {
+            let found = false;
+            let newSelected = 0;
+            const children = parent.getChildren();
+            for (let i = 0; i < children.length; i++) {
+                const child = children[i] as TabNode;
+                if (child === node) {
+                    found = true;
+                } else {
+                    if (!child.isFloating()) {
+                        newSelected = i;
+                        if (found) break;
+                    }
+                }
+            }
+            parent._setSelected(newSelected);
+        } else if (parent instanceof BorderNode) {
+            parent._setSelected(-1);
+        }
+    }
+}
+
+/** @hidden @internal */
+export function adjustSelectedIndexAfterDock(node: TabNode) {
+    const parent = node.getParent();
+    if (parent !== null && (parent instanceof TabSetNode || parent instanceof BorderNode)) {
+        const children = parent.getChildren();
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i] as TabNode;
+            if (child === node) {
+                parent._setSelected(i);
+                return;
+            }
+        }
+    }
+}
 
 /** @hidden @internal */
 export function adjustSelectedIndex(parent: TabSetNode | BorderNode | RowNode, removedIndex: number) {