archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* fix: return placeholder when selectedItems is empty

* chore: add test and changeset
This commit is contained in:
Ryo Matsukawa 2024-05-27 05:07:36 +09:00 committed by GitHub
parent fa26ce02fd
commit 31bfaebe2c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/proud-baboons-cough.md Normal file
View File

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

41
packages/components/select/__tests__/select.test.tsx
View File

@ -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", () => {

2
packages/components/select/src/select.tsx
View File

@ -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) => ({