Fix org selector dropdown not showing all options after clearing input

frontend/__tests__/components/features/org/org-selector.test.tsx

@@ -1,4 +1,5 @@
-import { screen, render, waitFor } from "@testing-library/react";
+import { screen, render, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { OrgSelector } from "#/components/features/org/org-selector";
@@ -42,4 +43,33 @@ describe("OrgSelector", () => {
       expect(selector).toHaveValue("Personal Workspace");
     });
   });
+
+  it("should show all options when the clear button is pressed", async () => {
+    const user = userEvent.setup();
+    vi.spyOn(organizationService, "getOrganizations").mockResolvedValue([
+      { id: "1", name: "Personal Workspace", balance: 100 },
+      { id: "2", name: "Acme Corp", balance: 1000 },
+      { id: "3", name: "Test Organization", balance: 500 },
+    ]);
+
+    renderOrgSelector();
+
+    // Wait for the selector to be populated with the first organization
+    const selector = await screen.findByTestId("org-selector");
+    await waitFor(() => {
+      expect(selector).toHaveValue("Personal Workspace");
+    });
+
+    // Click to open dropdown
+    await user.click(selector);
+
+    // Verify all 3 options are visible
+    const listbox = await screen.findByRole("listbox");
+    const options = within(listbox).getAllByRole("option");
+
+    expect(options).toHaveLength(3);
+    expect(options[0]).toHaveTextContent("Personal Workspace");
+    expect(options[1]).toHaveTextContent("Acme Corp");
+    expect(options[2]).toHaveTextContent("Test Organization");
+  });
 });

frontend/src/components/features/org/org-selector.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React from "react";
 import { SettingsDropdownInput } from "../settings/settings-dropdown-input";
 import { useSelectedOrganizationId } from "#/context/use-selected-organization";
 import { useOrganizations } from "#/hooks/query/use-organizations";
@@ -7,7 +7,7 @@ export function OrgSelector() {
   const { orgId, setOrgId } = useSelectedOrganizationId();
   const { data: organizations, isLoading } = useOrganizations();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!orgId && organizations?.length) {
       setOrgId(organizations[0].id);
     }

frontend/src/components/features/settings/settings-dropdown-input.tsx

@@ -63,7 +63,7 @@ export function SettingsDropdownInput({
         aria-label={typeof label === "string" ? label : name}
         data-testid={testId}
         name={name}
-        defaultItems={items}
+        items={items}
         defaultSelectedKey={defaultSelectedKey}
         selectedKey={selectedKey}
         onSelectionChange={onSelectionChange}

frontend/tests/org-selector.spec.ts

@@ -0,0 +1,38 @@
+import test, { expect } from "@playwright/test";
+
+test("org selector should show all options when cleared", async ({ page }) => {
+  await page.goto("/settings");
+
+  // Wait for the org selector to be visible and have a value
+  const orgSelector = page.getByTestId("org-selector");
+  await expect(orgSelector).toBeVisible();
+  await expect(orgSelector).not.toHaveValue("");
+
+  // Click to open the dropdown
+  await orgSelector.click();
+
+  // Should show multiple options in the dropdown
+  const listbox = page.getByRole("listbox");
+  await expect(listbox).toBeVisible();
+  const optionsBefore = listbox.getByRole("option");
+  const countBefore = await optionsBefore.count();
+  expect(countBefore).toBeGreaterThan(1);
+
+  // Close dropdown first
+  await page.keyboard.press("Escape");
+  await expect(listbox).not.toBeVisible();
+
+  // Hover to reveal clear button and click it
+  await orgSelector.hover();
+  const clearButton = page.locator('button[data-visible="true"]');
+  await clearButton.click();
+
+  // Click on the input to open the dropdown
+  await orgSelector.click();
+
+  // After clearing, all options should still be visible (not filtered)
+  await expect(listbox).toBeVisible();
+  const optionsAfter = listbox.getByRole("option");
+  const countAfter = await optionsAfter.count();
+  expect(countAfter).toBe(countBefore);
+});