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( + , + ); + + 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( + , + ); + + 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(props: Props, ref: ForwardedRef { - if (!state.selectedItems) return placeholder; + if (!state.selectedItems?.length) return placeholder; if (renderValue && typeof renderValue === "function") { const mappedItems = [...state.selectedItems].map((item) => ({