diff --git a/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts b/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts index 9ea164f0c6..ce78faa6ad 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts +++ b/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts @@ -6,6 +6,8 @@ import { useEffect } from 'react'; * * Dockview always sets the draggable flag on its tab elements, even when dnd is disabled. This hook traverses * up from the provided ref to find the closest tab element and sets its `draggable` attribute to `false`. + * + * TODO: Remove this when https://github.com/mathuo/dockview/pull/961 is shipped. */ export const useHackOutDvTabDraggable = (ref: RefObject) => { useEffect(() => { @@ -18,5 +20,15 @@ export const useHackOutDvTabDraggable = (ref: RefObject) => { return; } parentTab.setAttribute('draggable', 'false'); + + const tabContainer = parentTab.closest('.dv-tabs-and-actions-container'); + if (!tabContainer) { + return; + } + const voidContainer = tabContainer.querySelector('.dv-void-container'); + if (!voidContainer) { + return; + } + voidContainer.setAttribute('draggable', 'false'); }, [ref]); };