From 6993190fb91c6b6a2cb5153327695ba74f1a6681 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Sun, 26 May 2024 21:28:46 +0900
Subject: [PATCH] chore: add test and changeset

---
 .changeset/proud-baboons-cough.md             |  5 +++
 .../select/__tests__/select.test.tsx          | 41 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 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 0000000000..e98c07fd54
--- /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 fcea4294f0..75431dccbb 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", () => {