From ad9f884847131be108237e85cd289f381e11caab Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 16 Jul 2025 22:18:30 +0100
Subject: [PATCH] fix: respect disableDnd option for tab draggable attribute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix tabs and void containers to respect disableDnd option at initialization
- Add dynamic update system when disableDnd option changes via updateOptions()
- Ensure all tab elements properly update their draggable state when option changes
- Maintains consistency with existing paneview behavior that already respects disableDnd

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/dockview/components/tab/tab.ts              |  6 +++++-
 .../src/dockview/components/titlebar/tabs.ts        |  6 ++++++
 .../dockview/components/titlebar/tabsContainer.ts   |  6 ++++++
 .../dockview/components/titlebar/voidContainer.ts   |  6 +++++-
 .../dockview-core/src/dockview/dockviewComponent.ts | 13 +++++++++++++
 .../src/dockview/dockviewGroupPanelModel.ts         |  4 ++++
 6 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts
index c56bcaccb..af1943780 100644
--- a/packages/dockview-core/src/dockview/components/tab/tab.ts
+++ b/packages/dockview-core/src/dockview/components/tab/tab.ts
@@ -75,7 +75,7 @@ export class Tab extends CompositeDisposable {
         this._element = document.createElement('div');
         this._element.className = 'dv-tab';
         this._element.tabIndex = 0;
-        this._element.draggable = true;
+        this._element.draggable = !this.accessor.options.disableDnd;
 
         toggleClass(this.element, 'dv-inactive-tab', true);
 
@@ -159,6 +159,10 @@ export class Tab extends CompositeDisposable {
         this._element.appendChild(this.content.element);
     }
 
+    public updateDragAndDropState(): void {
+        this._element.draggable = !this.accessor.options.disableDnd;
+    }
+
     public dispose(): void {
         super.dispose();
     }
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.ts b/packages/dockview-core/src/dockview/components/titlebar/tabs.ts
index 53486ed7c..4bf3fd603 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabs.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabs.ts
@@ -298,4 +298,10 @@ export class Tabs extends CompositeDisposable {
 
         this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
     }
+
+    updateDragAndDropState(): void {
+        for (const tab of this._tabs) {
+            tab.value.updateDragAndDropState();
+        }
+    }
 }
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
index d2117c744..904dbf64b 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -55,6 +55,7 @@ export interface ITabsContainer extends IDisposable {
     setPrefixActionsElement(element: HTMLElement | undefined): void;
     show(): void;
     hide(): void;
+    updateDragAndDropState(): void;
 }
 
 export class TabsContainer
@@ -400,4 +401,9 @@ export class TabsContainer
             })
         );
     }
+
+    updateDragAndDropState(): void {
+        this.tabs.updateDragAndDropState();
+        this.voidContainer.updateDragAndDropState();
+    }
 }
diff --git a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
index 2f15a9499..b7f8b12fe 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
@@ -36,7 +36,7 @@ export class VoidContainer extends CompositeDisposable {
         this._element = document.createElement('div');
 
         this._element.className = 'dv-void-container';
-        this._element.draggable = true;
+        this._element.draggable = !this.accessor.options.disableDnd;
 
         this.addDisposables(
             this._onDrop,
@@ -79,4 +79,8 @@ export class VoidContainer extends CompositeDisposable {
             this.dropTarget
         );
     }
+
+    updateDragAndDropState(): void {
+        this._element.draggable = !this.accessor.options.disableDnd;
+    }
 }
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index 3ff0f2cca..9151f55ff 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -1272,7 +1272,13 @@ export class DockviewComponent
 
         this.updateDropTargetModel(options);
 
+        const oldDisableDnd = this.options.disableDnd;
         this._options = { ...this.options, ...options };
+        const newDisableDnd = this.options.disableDnd;
+
+        if (oldDisableDnd !== newDisableDnd) {
+            this.updateDragAndDropState();
+        }
 
         if ('theme' in options) {
             this.updateTheme();
@@ -1296,6 +1302,13 @@ export class DockviewComponent
         }
     }
 
+    private updateDragAndDropState(): void {
+        // Update draggable state for all tabs and void containers
+        for (const group of this.groups) {
+            group.model.updateDragAndDropState();
+        }
+    }
+
     focus(): void {
         this.activeGroup?.focus();
     }
diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
index 39609e44f..f46f330cd 100644
--- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
+++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
@@ -1136,6 +1136,10 @@ export class DockviewGroupPanelModel
         }
     }
 
+    updateDragAndDropState(): void {
+        this.tabsContainer.updateDragAndDropState();
+    }
+
     public dispose(): void {
         super.dispose();