chore: Update PortalOverlay's position in DragHandleWrapper only when buttons are shown

src/internal/components/drag-handle-wrapper/__tests__/portal-overlay.test.tsx

@@ -22,14 +22,15 @@ jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
 }));
 
 afterEach(() => {
+  isRtl = false;
   jest.restoreAllMocks();
 });
 
 test('matches the position of the tracked element', async () => {
   const trackElement = document.createElement('span');
 
   render(
-    <PortalOverlay track={trackElement}>
+    <PortalOverlay track={trackElement} isDisabled={false}>
       <div id="overlay">Overlay</div>
     </PortalOverlay>
   );
@@ -47,7 +48,7 @@ test('matches the position of the tracked element in rtl', async () => {
   const trackElement = document.createElement('span');
 
   render(
-    <PortalOverlay track={trackElement}>
+    <PortalOverlay track={trackElement} isDisabled={false}>
       <div id="overlay">Overlay</div>
     </PortalOverlay>
   );
@@ -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(
+    <PortalOverlay track={trackElement} isDisabled={true}>
+      <div id="overlay">Overlay</div>
+    </PortalOverlay>
+  );
+
+  const portalOverlay = document.querySelector<HTMLElement>(`.${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 }) => (
+    <PortalOverlay track={trackElement} isDisabled={isDisabled}>
+      <div id="overlay">Overlay</div>
+    </PortalOverlay>
+  );
+
+  const { rerender } = render(<PortalOverlayWrapper isDisabled={true} />);
+  const portalOverlay = document.querySelector<HTMLElement>(`.${styles['portal-overlay']}`)!;
+  await waitFor(() => {
+    expect(portalOverlay.style.translate).toBeUndefined();
+    expect(portalOverlay.style.width).toBe('');
+    expect(portalOverlay.style.height).toBe('');
+  });
+
+  rerender(<PortalOverlayWrapper isDisabled={false} />);
+  await waitFor(() => {
+    expect(portalOverlay.style.translate).toBe('2px 4px');
+    expect(portalOverlay.style.width).toBe('10px');
+    expect(portalOverlay.style.height).toBe('20px');
+  });
+});

src/internal/components/drag-handle-wrapper/index.tsx

@@ -189,7 +189,7 @@ export default function DragHandleWrapper({
         )}
       </div>
 
-      <PortalOverlay track={dragHandleRef.current}>
+      <PortalOverlay track={dragHandleRef.current} isDisabled={!showButtons}>
         {directions['block-start'] && (
           <DirectionButton
             show={!isDisabled && showButtons}

src/internal/components/drag-handle-wrapper/portal-overlay.tsx

@@ -12,11 +12,19 @@ import Portal from '../portal';
 
 import styles from './styles.css.js';
 
-export default function PortalOverlay({ track, children }: { track: HTMLElement | null; children: React.ReactNode }) {
+export default function PortalOverlay({
+  track,
+  isDisabled,
+  children,
+}: {
+  track: HTMLElement | null;
+  isDisabled: boolean;
+  children: React.ReactNode;
+}) {
   const ref = useRef<HTMLSpanElement | null>(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;