fix(select): placeholder text display for controlled component (#3081)

* fix: return placeholder when selectedItems is empty

* chore: add test and changeset

.changeset/proud-baboons-cough.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+Fix: display placeholder text when unselected for controlled (#3062)

packages/components/select/__tests__/select.test.tsx

@@ -506,6 +506,47 @@ describe("Select", () => {
     // assert that the second select listbox is open
     expect(select2).toHaveAttribute("aria-expanded", "true");
   });
+
+  it("should display placeholder text when unselected", async () => {
+    const wrapper = render(
+      <Select
+        aria-label="Favorite Animal"
+        data-testid="test-select"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+      >
+        <SelectItem key="penguin">Penguin</SelectItem>
+        <SelectItem key="zebra">Zebra</SelectItem>
+        <SelectItem key="shark">Shark</SelectItem>
+      </Select>,
+    );
+
+    const select = wrapper.getByTestId("test-select");
+
+    expect(select).toHaveTextContent("Select an animal");
+  });
+
+  it("should display placeholder text when unselected (controlled)", async () => {
+    const onSelectionChange = jest.fn();
+    const wrapper = render(
+      <Select
+        isOpen
+        aria-label="Favorite Animal"
+        data-testid="test-select"
+        placeholder="Select an animal"
+        selectedKeys={[]}
+        onSelectionChange={onSelectionChange}
+      >
+        <SelectItem key="penguin">Penguin</SelectItem>
+        <SelectItem key="zebra">Zebra</SelectItem>
+        <SelectItem key="shark">Shark</SelectItem>
+      </Select>,
+    );
+
+    const select = wrapper.getByTestId("test-select");
+
+    expect(select).toHaveTextContent("Select an animal");
+  });
 });
 
 describe("Select with React Hook Form", () => {

packages/components/select/src/select.tsx

@@ -75,7 +75,7 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   ]);
 
   const renderSelectedItem = useMemo(() => {
-    if (!state.selectedItems) return placeholder;
+    if (!state.selectedItems?.length) return placeholder;
 
     if (renderValue && typeof renderValue === "function") {
       const mappedItems = [...state.selectedItems].map((item) => ({