fix(accordion): selectedKeys added to the values memo function (#1639)

.changeset/short-eagles-sort.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/accordion": patch
+---
+
+Fix #1402 controlled accordion

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:*",

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,

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>
   );
 };
 

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