fix(badge): handle all-null/empty arrays in renderBadge and fix hover test

- renderBadge now filters array items and returns placeholder when all
  values are null or empty strings
- Add tests for [null, null] and ["", ""] badge column cases
- Change field-renderers test to use user.hover instead of user.click
  to match the openOnHover popover behavior

Author: IzumiSy

packages/core/src/components/data-table/cell-renderers.tsx

@@ -122,7 +122,9 @@ function renderDate(value: unknown, options: DateCellOptions | undefined): React
 }
 
 function renderBadge(value: unknown, options: BadgeCellOptions | undefined): ReactNode {
-  if (isEmpty(value) || (Array.isArray(value) && value.length === 0)) return PLACEHOLDER;
+  const items = Array.isArray(value) ? value : value != null ? [value] : [];
+  const nonEmpty = items.filter((v) => v != null && v !== "");
+  if (nonEmpty.length === 0) return PLACEHOLDER;
   return <BadgeList value={value} options={options} maxVisible={options?.maxVisible} />;
 }
 

packages/core/src/components/data-table/data-table.test.tsx

@@ -774,6 +774,72 @@ describe("DataTable", () => {
       expect(container.textContent).toContain("—");
     });
 
+    it("renders placeholder for array of all-null values in badge column", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: [null, null] as (string | null)[],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags as unknown as string[],
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("—");
+    });
+
+    it("renders placeholder for array of empty strings in badge column", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: ["", ""],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags,
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("—");
+    });
+
     it("renders link cells with anchor when href is provided", () => {
       function RouterWrapper({ children }: { children: ReactNode }) {
         return <MemoryRouter>{wrapper({ children })}</MemoryRouter>;

packages/core/src/components/description-card/field-renderers.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router";
 import { createAppShellWrapper } from "../../../tests/test-utils";
@@ -124,7 +124,7 @@ describe("renderField", () => {
       expect(container.textContent).not.toContain("+");
     });
 
-    it("shows overflow badges in popover on click", async () => {
+    it("shows overflow badges in popover on hover", async () => {
       const user = userEvent.setup();
       render(
         renderField(
@@ -138,10 +138,12 @@ describe("renderField", () => {
       );
 
       const trigger = screen.getByText("+2");
-      await user.click(trigger);
+      await user.hover(trigger);
 
-      expect(screen.getByText("C")).toBeDefined();
-      expect(screen.getByText("D")).toBeDefined();
+      await waitFor(() => {
+        expect(screen.getByText("C")).toBeDefined();
+        expect(screen.getByText("D")).toBeDefined();
+      });
     });
   });