defaultValue Prop Not Working as Expected in Radix UI Accordion with Dynamic Children

[vladimirzb]

Description:
I'm using Radix UI's Accordion component in a Next.js project and encountering an issue where the defaultValue prop doesn't seem to work when the Accordion's children are dynamically generated. Despite setting defaultValue, the accordion items do not open by default as expected.

Code Snippet:
Here's how I've set up my accordion components:

Page code:

<AccordionContextProvider>
  <div className="w-full">
    <TotalIngresosThisMonth />
  </div>
  <ClientSideAccordionManager>
    <AccordionContentWrapper itemId="item-1" title="Administrar ingresos">
      {/* Content for item-1 */}
    </AccordionContentWrapper>
    <AccordionContentWrapper itemId="item-2" title="Administrar fuente de ingresos">
      {/* Content for item-2 */}
    </AccordionContentWrapper>
    {/* Additional sections if needed */}
  </ClientSideAccordionManager>
</AccordionContextProvider>

ClientSideAccordionManager:

export const ClientSideAccordionManager: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { openItems, setOpenItems } = useAccordionContext();

  const handleValueChange = (value: string[]) => {
    setOpenItems(value);
  };

  return (
    <Accordion
      type="multiple"
      defaultValue={["item-1"]} // Attempted to set item-1 as the default open item
      value={openItems}
      onValueChange={handleValueChange}
    >
      {children}
    </Accordion>
  );
};

AccordionContentWrapper:

"use client";
import { AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import React from 'react';

export const AccordionContentWrapper: React.FC<{
  itemId: string;
  title: string;
  children: React.ReactNode;
}> = ({ itemId, title, children }) => {
  return (
    <AccordionItem value={itemId}>
      <AccordionTrigger>{title}</AccordionTrigger>
      <AccordionContent>{children}</AccordionContent>
    </AccordionItem>
  );
};

Expected Behavior:
I expect the accordion item specified in the defaultValue prop to be open by default when the page loads.

Actual Behavior:
The accordion does not open any items by default, regardless of the defaultValue specified.

Question:
Could the issue be related to how the children prop is used or possibly a misunderstanding of how defaultValue should work with dynamically generated children? Any insights or suggestions on how to resolve this issue would be greatly appreciated.

[brenden-js]

Also same thing is happening on the Resizable Panel in shadcn/ui for me, defaultValue prop does not actually do anything. I'm thinking maybe it has to do with the component needing to be in a flex box or something?

[vladimirzb]

Hi, thank you for your reply! I've reported this as an issue because it might be a bug. If you think this issue deserves more attention, please consider upvoting it. Your support could really help! :)
#2770 (comment)

[kimiaabt]

The list of strings you put in the defaultValues in the Accordion-component has to match the value prop in the AccordionItem-component.
So in your case:

<AccordionItem value="item-1">