fix: Fixed issue where “Accordion” had no handling for “asChild”

[joseph0926]

What was the problem

shadcn Default EX:

  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      <div>test</div>
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>

shadcn asChild EX:

  <AccordionPrimitive.Header className="flex">
    <div
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      test
    </div>
    <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
  </AccordionPrimitive.Header>

---

• Two React elements are being rendered in “<AccordionPrimitive.Header>” as shown in the code example above
• However, “radix-ui” receives a child component as “children” in <AccordionPrimitive.Header>, which violates the React rule “children can only receive one child component”

Where's the problem with the file?

• accordion.tsx

How I fixed it

      <span className="flex flex-1 items-center justify-between">
        {children}
        <ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
      </span>

• I wrapped “children” and the icon in <span>

Related issues

• #4732

• https://github.com/shadcn-ui/ui/issues/4732#issuecomment-2334930255

Check for PR

• [x] Passed local tests
• [x] Ensure that nothing other than the modification is affected

[vercel[bot]]

@joseph0926 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[UltimateGG]

With asChild it's to help the user override the styles, so if they specify asChild it should not include anything they cannot control (like the chevron down icon) and just take their raw input. They can then add the icon if they want

[joseph0926]

With asChild it's to help the user override the styles, so if they specify asChild it should not include anything they cannot control (like the chevron down icon) and just take their raw input. They can then add the icon if they want

The exact role of "asChild" is to be replaced by the tag of the sub-element instead of the element specified by default in "radix-ui", and to override the style and properties.

Namely, <AccordionPrimitive.Trigger asChild><div>test</div> Is <button className="xxx" {...props} > -> <div className="xxx" {...props}> That's how it works.

The problem is that in "shadcn", AccordionPrimitive.Trigger already has two sub-components ("children", "icon") at the same level

This makes it impossible to replace "asChild"

Details are in the link below "https://www.radix-ui.com/primitives/docs/guides/composition#changing-the-element-type"

Also, from the link below

"`If you do decide to change the underlying element type, it is your responsibility to ensure it remains accessible and functional. In the case of Tooltip.Trigger for example, it must be a focusable element that can respond to pointer and keyboard events. If you were to switch it to a div, it would no longer be accessible."" You can see from this sentence that it's completely replaced

[rimzzlabs]

why this haven't merged yet?

[thinhbg2812]

why this haven't merged yet?

and now PR got conflict lmao

[joseph0926]

why this haven't merged yet?

I submitted a new PR, but there still seems to be no response from the @shadcn . Perhaps the PR content is incorrect, or it is an issue that they are not interested in.

[rimzzlabs]

why this haven't merged yet?

I submitted a new PR, but there still seems to be no response from the @shadcn . Perhaps the PR content is incorrect, or it is an issue that they are not interested in.

maybe try to follow their PR rules, make it similar so the maintainers noticed it, good work bro, really helpful PR

[pauliusuza]

Also need to modify the Trigger class to [&[data-state=open]>*>svg]:rotate-180, otherwise you loose the open/close animation.