From a0b8920214f3d97711c9b6292644aae1da8259c6 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Sun, 13 Oct 2024 22:05:22 +0900
Subject: [PATCH 1/3] fix(listbox): listBoxItem key to optional

---
 .../listbox/src/base/listbox-item-base.tsx       |  2 +-
 .../components/select/__tests__/select.test.tsx  | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/listbox/src/base/listbox-item-base.tsx b/packages/components/listbox/src/base/listbox-item-base.tsx
index d3d68d6c65..41af3b3e58 100644
--- a/packages/components/listbox/src/base/listbox-item-base.tsx
+++ b/packages/components/listbox/src/base/listbox-item-base.tsx
@@ -91,7 +91,7 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
 
 export type ListboxItemBaseProps<T extends object = {}> = Props<T> &
   ListboxItemVariantProps &
-  AriaOptionProps &
+  Omit<AriaOptionProps, "key"> &
   FocusableProps &
   PressEvents;
 
diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx
index ec751bec8c..4e6db204a6 100644
--- a/packages/components/select/__tests__/select.test.tsx
+++ b/packages/components/select/__tests__/select.test.tsx
@@ -352,9 +352,9 @@ describe("Select", () => {
 
   it("onSelectionChange should be called with a Set of item ids upon selection", async () => {
     const itemsWithId = [
-      {id: "1", value: "penguin"},
-      {id: "2", value: "zebra"},
-      {id: "3", value: "shark"},
+      {id: 1, value: "penguin"},
+      {id: 2, value: "zebra"},
+      {id: 3, value: "shark"},
     ];
 
     const onSelectionChangeId = jest.fn();
@@ -365,7 +365,7 @@ describe("Select", () => {
         label="Test with ID"
         onSelectionChange={onSelectionChangeId}
       >
-        {(item) => <SelectItem key={item.id}>{item.value}</SelectItem>}
+        {(item) => <SelectItem>{item.value}</SelectItem>}
       </Select>,
     );
 
@@ -392,9 +392,9 @@ describe("Select", () => {
 
   it("onSelectionChange should be called with a Set of item keys upon selection", async () => {
     const itemsWithKey = [
-      {key: "1", value: "penguin"},
-      {key: "2", value: "zebra"},
-      {key: "3", value: "shark"},
+      {key: 1, value: "penguin"},
+      {key: 2, value: "zebra"},
+      {key: 3, value: "shark"},
     ];
 
     const onSelectionChangeKey = jest.fn();
@@ -405,7 +405,7 @@ describe("Select", () => {
         label="Test with Key"
         onSelectionChange={onSelectionChangeKey}
       >
-        {(item) => <SelectItem key={item.key}>{item.value}</SelectItem>}
+        {(item) => <SelectItem>{item.value}</SelectItem>}
       </Select>,
     );
 

From f4407c648eeab58b450bf9b17d1e434cb654c3d1 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Sun, 13 Oct 2024 22:27:10 +0900
Subject: [PATCH 2/3] chore: add defaultSelectedKeys test for numeric keys and
 ids

---
 .../select/__tests__/select.test.tsx          | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx
index 4e6db204a6..764facaa90 100644
--- a/packages/components/select/__tests__/select.test.tsx
+++ b/packages/components/select/__tests__/select.test.tsx
@@ -350,6 +350,56 @@ describe("Select", () => {
     });
   });
 
+  it("should pre-select items based on defaultSelectedKeys (numeric keys)", () => {
+    const items = [
+      {key: 1, value: "Penguin"},
+      {key: 2, value: "Zebra"},
+      {key: 3, value: "Shark"},
+    ];
+
+    const wrapper = render(
+      <Select
+        isOpen
+        defaultSelectedKeys={[1, 2]} // Numeric keys for selection
+        items={items}
+        label="Test Default Selected Keys"
+        selectionMode="multiple"
+      >
+        {(item) => <SelectItem>{item.value}</SelectItem>}
+      </Select>,
+    );
+
+    const selectedOptions = wrapper.getAllByRole("option", {selected: true});
+
+    expect(selectedOptions.length).toBe(2);
+    expect(selectedOptions.map((opt) => opt.textContent)).toEqual(["Penguin", "Zebra"]);
+  });
+
+  it("should pre-select items based on defaultSelectedKeys (numeric ids)", () => {
+    const items = [
+      {id: 1, value: "Penguin"},
+      {id: 2, value: "Zebra"},
+      {id: 3, value: "Shark"},
+    ];
+
+    const wrapper = render(
+      <Select
+        isOpen
+        defaultSelectedKeys={[1, 2]} // Numeric ids for selection
+        items={items}
+        label="Test Default Selected IDs"
+        selectionMode="multiple"
+      >
+        {(item) => <SelectItem>{item.value}</SelectItem>}
+      </Select>,
+    );
+
+    const selectedOptions = wrapper.getAllByRole("option", {selected: true});
+
+    expect(selectedOptions.length).toBe(2);
+    expect(selectedOptions.map((opt) => opt.textContent)).toEqual(["Penguin", "Zebra"]);
+  });
+
   it("onSelectionChange should be called with a Set of item ids upon selection", async () => {
     const itemsWithId = [
       {id: 1, value: "penguin"},

From d89915dcf440bbd96abcefedbe6c3a267d605ab7 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Sun, 13 Oct 2024 23:27:38 +0900
Subject: [PATCH 3/3] chore: add changeset

---
 .changeset/curly-zoos-thank.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/curly-zoos-thank.md

diff --git a/.changeset/curly-zoos-thank.md b/.changeset/curly-zoos-thank.md
new file mode 100644
index 0000000000..39f532bfcd
--- /dev/null
+++ b/.changeset/curly-zoos-thank.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/listbox": patch
+---
+
+change ListboxItem key to optional (#3880)