diff --git a/src/internal/components/drag-handle-wrapper/__tests__/portal-overlay.test.tsx b/src/internal/components/drag-handle-wrapper/__tests__/portal-overlay.test.tsx index 08471037f8..f606d0afde 100644 --- a/src/internal/components/drag-handle-wrapper/__tests__/portal-overlay.test.tsx +++ b/src/internal/components/drag-handle-wrapper/__tests__/portal-overlay.test.tsx @@ -22,6 +22,7 @@ jest.mock('@cloudscape-design/component-toolkit/internal', () => ({ })); afterEach(() => { + isRtl = false; jest.restoreAllMocks(); }); @@ -29,7 +30,7 @@ test('matches the position of the tracked element', async () => { const trackElement = document.createElement('span'); render( - +
Overlay
); @@ -47,7 +48,7 @@ test('matches the position of the tracked element in rtl', async () => { const trackElement = document.createElement('span'); render( - +
Overlay
); @@ -59,3 +60,45 @@ test('matches the position of the tracked element in rtl', async () => { expect(portalOverlay.style.height).toBe('20px'); }); }); + +test('does not update position when disabled', async () => { + const trackElement = document.createElement('span'); + + render( + +
Overlay
+
+ ); + + const portalOverlay = document.querySelector(`.${styles['portal-overlay']}`)!; + await waitFor(() => { + expect(portalOverlay.style.translate).toBeUndefined(); + expect(portalOverlay.style.width).toBe(''); + expect(portalOverlay.style.height).toBe(''); + }); +}); + +test('resumes position updates when enabled after being disabled', async () => { + const trackElement = document.createElement('span'); + + const PortalOverlayWrapper = ({ isDisabled }: { isDisabled: boolean }) => ( + +
Overlay
+
+ ); + + const { rerender } = render(); + const portalOverlay = document.querySelector(`.${styles['portal-overlay']}`)!; + await waitFor(() => { + expect(portalOverlay.style.translate).toBeUndefined(); + expect(portalOverlay.style.width).toBe(''); + expect(portalOverlay.style.height).toBe(''); + }); + + rerender(); + await waitFor(() => { + expect(portalOverlay.style.translate).toBe('2px 4px'); + expect(portalOverlay.style.width).toBe('10px'); + expect(portalOverlay.style.height).toBe('20px'); + }); +}); diff --git a/src/internal/components/drag-handle-wrapper/index.tsx b/src/internal/components/drag-handle-wrapper/index.tsx index 8aaee3cdfa..f7807b5701 100644 --- a/src/internal/components/drag-handle-wrapper/index.tsx +++ b/src/internal/components/drag-handle-wrapper/index.tsx @@ -189,7 +189,7 @@ export default function DragHandleWrapper({ )} - + {directions['block-start'] && ( (null); useEffect(() => { - if (track === null) { + if (track === null || isDisabled) { return; } @@ -56,7 +64,7 @@ export default function PortalOverlay({ track, children }: { track: HTMLElement return () => { cleanedUp = true; }; - }, [track]); + }, [isDisabled, track]); if (track === null) { return null;