Skip to content

Commit 7160f74

Browse files
mathuoclaude
andcommitted
fix(dockview-core): use visibility:hidden instead of display:none for always renderer
Prevents resize-to-0x0 events when panels with renderer='always' are hidden, which disrupted virtualized components (e.g. data grids) that manage their own scrollbars. Adds pointer-events:none to preserve drag-and-drop behaviour on hidden overlays. Closes #1063. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent ef6a232 commit 7160f74

File tree

2 files changed

+19
-12
lines changed

2 files changed

+19
-12
lines changed

packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,8 @@ describe('overlayRenderContainer', () => {
169169
expect(panelContentEl.parentElement).toBe(container);
170170
expect(container.parentElement).toBe(parentContainer);
171171

172-
expect(container.style.display).toBe('');
172+
expect(container.style.visibility).toBe('');
173+
expect(container.style.pointerEvents).toBe('');
173174

174175
expect(container.style.left).toBe('50px');
175176
expect(container.style.top).toBe('100px');
@@ -181,7 +182,8 @@ describe('overlayRenderContainer', () => {
181182

182183
onDidDimensionsChange.fire({});
183184
await exhaustAnimationFrame();
184-
expect(container.style.display).toBe('');
185+
expect(container.style.visibility).toBe('');
186+
expect(container.style.pointerEvents).toBe('');
185187

186188
expect(container.style.left).toBe('49px');
187189
expect(container.style.top).toBe('99px');
@@ -193,22 +195,25 @@ describe('overlayRenderContainer', () => {
193195

194196
(panel as Writable<IDockviewPanel>).api.isVisible = false;
195197
onDidVisibilityChange.fire({});
196-
expect(container.style.display).toBe('none');
198+
expect(container.style.visibility).toBe('hidden');
199+
expect(container.style.pointerEvents).toBe('none');
197200
expect(
198201
referenceContainer.element.getBoundingClientRect
199202
).toHaveBeenCalledTimes(2);
200203

201204
(panel as Writable<IDockviewPanel>).api.isVisible = true;
202205
onDidVisibilityChange.fire({});
203-
expect(container.style.display).toBe('');
206+
expect(container.style.pointerEvents).toBe('');
207+
await exhaustAnimationFrame();
208+
expect(container.style.visibility).toBe('');
204209

205-
expect(container.style.left).toBe('49px');
206-
expect(container.style.top).toBe('99px');
207-
expect(container.style.width).toBe('101px');
208-
expect(container.style.height).toBe('201px');
210+
expect(container.style.left).toBe('50px');
211+
expect(container.style.top).toBe('100px');
212+
expect(container.style.width).toBe('100px');
213+
expect(container.style.height).toBe('200px');
209214
expect(
210215
referenceContainer.element.getBoundingClientRect
211-
).toHaveBeenCalledTimes(2);
216+
).toHaveBeenCalledTimes(3);
212217
});
213218

214219
test('related z-index from `aria-level` set on floating panels', async () => {

packages/dockview-core/src/overlay/overlayRenderContainer.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -205,9 +205,11 @@ export class OverlayRenderContainer extends CompositeDisposable {
205205
if (panel.api.isVisible) {
206206
this.positionCache.invalidate();
207207
resize();
208+
focusContainer.style.pointerEvents = '';
209+
} else {
210+
focusContainer.style.visibility = 'hidden';
211+
focusContainer.style.pointerEvents = 'none';
208212
}
209-
210-
focusContainer.style.display = panel.api.isVisible ? '' : 'none';
211213
};
212214

213215
const observerDisposable = new MutableDisposable();
@@ -261,7 +263,7 @@ export class OverlayRenderContainer extends CompositeDisposable {
261263
* the dnd events for the expect behaviours to continue to occur in terms of dnd
262264
*
263265
* the dnd observer does not need to be conditional on whether the panel is visible since
264-
* non-visible panels are 'display: none' and in such case the dnd observer will not fire.
266+
* non-visible panels have 'pointer-events: none' and in such case the dnd observer will not fire.
265267
*/
266268
new DragAndDropObserver(focusContainer, {
267269
onDragEnd: (e) => {

0 commit comments

Comments
 (0)