From 13e584d52200dc0ba3f58723e7c87b3976b7c966 Mon Sep 17 00:00:00 2001 From: Garuda CCS Date: Fri, 14 Aug 2026 02:24:16 +0530 Subject: [PATCH] fix(icon-picker): allow selecting the empty/no-icon option (#3298) The icon picker grid starts with an empty string entry that renders the "no icon" (prohibit) symbol, but the onClick guard "if (icon)" treated the empty string as falsy and ignored the click. Change the guard to check for a defined string value so the empty/no-icon option can be selected. Closes #3252 Closes #3261 Co-authored-by: Devin Co-authored-by: Amruth Pillai --- .../web/src/components/input/icon-picker.test.tsx | 15 ++++++++++++++- apps/web/src/components/input/icon-picker.tsx | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/input/icon-picker.test.tsx b/apps/web/src/components/input/icon-picker.test.tsx index 42d90c749..011471df2 100644 --- a/apps/web/src/components/input/icon-picker.test.tsx +++ b/apps/web/src/components/input/icon-picker.test.tsx @@ -1,6 +1,6 @@ // @vitest-environment happy-dom -import { render } from "@testing-library/react"; +import { fireEvent, render, screen } from "@testing-library/react"; import { beforeAll, describe, expect, it, vi } from "vitest"; import { i18n } from "@lingui/core"; import { I18nProvider } from "@lingui/react"; @@ -68,4 +68,17 @@ describe("IconPicker", () => { const { container } = renderPicker(); expect(container.querySelectorAll("button").length).toBeGreaterThanOrEqual(1); }); + + it("calls onChange with an empty string when the no-icon cell is clicked", () => { + const onChange = vi.fn(); + render( + + + , + ); + + const firstCell = screen.getByTestId("grid").querySelector("button"); + if (firstCell) fireEvent.click(firstCell); + expect(onChange).toHaveBeenCalledWith(""); + }); }); diff --git a/apps/web/src/components/input/icon-picker.tsx b/apps/web/src/components/input/icon-picker.tsx index d0d1b7db6..2c13689c5 100644 --- a/apps/web/src/components/input/icon-picker.tsx +++ b/apps/web/src/components/input/icon-picker.tsx @@ -58,7 +58,7 @@ function IconCellComponent({ columnIndex, rowIndex, style, icons, onChange }: Ic style={style} tabIndex={-1} onClick={() => { - if (icon) onChange(icon); + if (typeof icon === "string") onChange(icon); }} className="flex size-full items-center justify-center hover:bg-accent" >