From bb8ed58749fa50666a1c8a5fa005376fec185710 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 16 Sep 2023 17:01:39 -0300
Subject: [PATCH] fix(accordion): selectedKeys added to the values memo
 function (#1639)

---
 .changeset/short-eagles-sort.md               |  5 ++
 packages/components/accordion/package.json    |  1 +
 .../components/accordion/src/use-accordion.ts |  1 +
 .../accordion/stories/accordion.stories.tsx   | 49 ++++++++++++++-----
 pnpm-lock.yaml                                |  3 ++
 5 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/short-eagles-sort.md

diff --git a/.changeset/short-eagles-sort.md b/.changeset/short-eagles-sort.md
new file mode 100644
index 0000000000..9d159db432
--- /dev/null
+++ b/.changeset/short-eagles-sort.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/accordion": patch
+---
+
+Fix #1402 controlled accordion
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index 181f024d23..f7f4dd45e7 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -62,6 +62,7 @@
     "@react-types/shared": "^3.20.0"
   },
   "devDependencies": {
+    "@nextui-org/button": "workspace:*",
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
diff --git a/packages/components/accordion/src/use-accordion.ts b/packages/components/accordion/src/use-accordion.ts
index 1745a1660f..f37b010ce8 100644
--- a/packages/components/accordion/src/use-accordion.ts
+++ b/packages/components/accordion/src/use-accordion.ts
@@ -198,6 +198,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
       isCompact,
       isDisabled,
       hideIndicator,
+      selectedKeys,
       disableAnimation,
       keepContentMounted,
       state?.expandedKeys.values,
diff --git a/packages/components/accordion/stories/accordion.stories.tsx b/packages/components/accordion/stories/accordion.stories.tsx
index d668aa78dd..bc8d95aa88 100644
--- a/packages/components/accordion/stories/accordion.stories.tsx
+++ b/packages/components/accordion/stories/accordion.stories.tsx
@@ -14,6 +14,7 @@ import {
 } from "@nextui-org/shared-icons";
 import {Avatar} from "@nextui-org/avatar";
 import {Input} from "@nextui-org/input";
+import {Button} from "@nextui-org/button";
 
 import {Accordion, AccordionProps, AccordionItem} from "../src";
 import {AccordionItemProps} from "../src";
@@ -231,17 +232,43 @@ const ControlledTemplate = (args: AccordionProps) => {
   console.log(selectedKeys);
 
   return (
-    <Accordion {...args} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
+    <div className="flex flex-col gap-4">
+      <Accordion {...args} selectedKeys={selectedKeys}>
+        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+          {defaultContent}
+        </AccordionItem>
+        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+          {defaultContent}
+        </AccordionItem>
+        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+          {defaultContent}
+        </AccordionItem>
+      </Accordion>
+
+      <div className="flex gap-2">
+        <Button
+          onPress={() => {
+            setSelectedKeys(new Set(["1"]));
+          }}
+        >
+          Open 1
+        </Button>
+        <Button
+          onPress={() => {
+            setSelectedKeys(new Set(["2"]));
+          }}
+        >
+          Open 2
+        </Button>
+        <Button
+          onPress={() => {
+            setSelectedKeys(new Set(["3"]));
+          }}
+        >
+          Open 3
+        </Button>
+      </div>
+    </div>
   );
 };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8bf6c0f190..8b487342cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -641,6 +641,9 @@ importers:
       '@nextui-org/avatar':
         specifier: workspace:*
         version: link:../avatar
+      '@nextui-org/button':
+        specifier: workspace:*
+        version: link:../button
       '@nextui-org/input':
         specifier: workspace:*
         version: link:../input