fix: Board item visibility issue when moving using keyboard arrows (#379)

Author: georgylobko

src/internal/item-container/__tests__/item-container.test.tsx

@@ -8,6 +8,8 @@ import { DragAndDropData } from "../../../../lib/components/internal/dnd-control
 import { ItemContainer, ItemContainerProps, useItemContext } from "../../../../lib/components/internal/item-container";
 import { Coordinates } from "../../../../lib/components/internal/utils/coordinates";
 
+import styles from "../../../../lib/components/internal/item-container/styles.css.js";
+
 afterEach(cleanup);
 
 vi.mock("../../../../lib/components/internal/dnd-controller/controller");
@@ -121,6 +123,23 @@ describe("keyboard interaction", () => {
       expect(onKeyMoveMock).toBeCalledWith("up");
     });
   });
+
+  test("applies keyboardDragged class when keyboard drag transition is active", () => {
+    const { container } = render(<ItemContainer {...defaultProps} placed={true} />);
+
+    act(() => {
+      mockController.start({
+        interactionType: "keyboard",
+        operation: "reorder",
+        draggableItem: defaultProps.item,
+        collisionRect: { top: 0, bottom: 0, left: 0, right: 0 },
+        coordinates: new Coordinates({ x: 0, y: 0 }),
+      } as DragAndDropData);
+    });
+
+    const itemElement = container.querySelector('[data-item-id="ID"]');
+    expect(itemElement).toHaveClass(styles.keyboardDragged);
+  });
 });
 
 test("does not renders in portal when item in reorder state by a pointer", () => {

src/internal/item-container/index.tsx

@@ -440,14 +440,19 @@ function ItemContainerComponent(
     itemTransitionClassNames.push(styles.inTransition);
   }
 
-  if (transition && transition.interactionType === "pointer") {
-    // Adjust the dragged/resized item to the pointer's location.
-    itemTransitionClassNames.push(transition.operation === "resize" ? styles.resized : styles.dragged);
-    itemTransitionStyle.insetInlineStart = transition.positionTransform?.x;
-    itemTransitionStyle.insetBlockStart = transition.positionTransform?.y;
-    itemTransitionStyle.inlineSize = transition.sizeTransform?.width;
-    itemTransitionStyle.blockSize = transition.sizeTransform?.height;
-    itemTransitionStyle.pointerEvents = "none";
+  if (transition) {
+    if (transition.interactionType === "pointer") {
+      // Adjust the dragged/resized item to the pointer's location.
+      itemTransitionClassNames.push(transition.operation === "resize" ? styles.resized : styles.dragged);
+      itemTransitionStyle.insetInlineStart = transition.positionTransform?.x;
+      itemTransitionStyle.insetBlockStart = transition.positionTransform?.y;
+      itemTransitionStyle.inlineSize = transition.sizeTransform?.width;
+      itemTransitionStyle.blockSize = transition.sizeTransform?.height;
+      itemTransitionStyle.pointerEvents = "none";
+    }
+    if (transition.interactionType === "keyboard") {
+      itemTransitionClassNames.push(styles.keyboardDragged);
+    }
   }
 
   if (isHidden) {

src/internal/item-container/styles.scss

@@ -25,6 +25,9 @@
   z-index: 2000;
   position: fixed;
 }
+.transformed.keyboardDragged {
+  z-index: 2000;
+}
 .resized {
   z-index: 2000;
   position: absolute;