fix: sync accordion open items with default values

ably · Nov 21, 2024 · a6e1fa5 · a6e1fa5
1 parent f634a72
commit a6e1fa5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx
@@ -147,7 +147,18 @@ const Accordion = ({
   options,
   ...props
 }: AccordionProps) => {
-  const [openRowValues, setOpenRowValues] = useState<string | string[]>([]);
+  const openIndexes = useMemo(() => {
+    const indexValues = data.map((_, i) => `accordion-item-${i}`);
+    return options?.fullyOpen
+      ? indexValues
+      : indexValues.filter((_, index) =>
+          options?.defaultOpenIndexes?.includes(index),
+        );
+  }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);
+
+  const [openRowValues, setOpenRowValues] = useState<string | string[]>(
+    openIndexes,
+  );
   const innerAccordion = data.map((item, index) => (
     <AccordionRow
       key={item.name}
@@ -166,15 +177,6 @@ const Accordion = ({
     </AccordionRow>
   ));
 
-  const openIndexes = useMemo(() => {
-    const indexValues = data.map((_, i) => `accordion-item-${i}`);
-    return options?.fullyOpen
-      ? indexValues
-      : indexValues.filter((_, index) =>
-          options?.defaultOpenIndexes?.includes(index),
-        );
-  }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);
-
   return (
     <div {...props}>
       {options?.autoClose ? (

diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx
@@ -100,7 +100,7 @@ export const SelectableHeaders = {
   render: () =>
     AccordionPresentation({
       data: dataWithIcons,
-      options: { selectable: true },
+      options: { selectable: true, defaultOpenIndexes: [0] },
     }),
   parameters: {
     docs: {