From 31bfaebe2c53b0a3b9d18c65db4089e6044fe9dc Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Mon, 27 May 2024 05:07:36 +0900
Subject: [PATCH] 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             |  5 +++
 .../select/__tests__/select.test.tsx          | 41 +++++++++++++++++++
 packages/components/select/src/select.tsx     |  2 +-
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/proud-baboons-cough.md

diff --git a/.changeset/proud-baboons-cough.md b/.changeset/proud-baboons-cough.md
new file mode 100644
index 000000000..e98c07fd5
--- /dev/null
+++ b/.changeset/proud-baboons-cough.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+Fix: display placeholder text when unselected for controlled (#3062)
diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx
index fcea4294f..75431dccb 100644
--- a/packages/components/select/__tests__/select.test.tsx
+++ b/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", () => {
diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index 0a92cab20..83aa324c9 100644
--- a/packages/components/select/src/select.tsx
+++ b/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) => ({