Move onClick functionality in Trigger to only fire when clicking Chevron

[MahemaS27]

Hello! I am new to developing with Radix and wanted to see if something like this was possible. I am building out an Accordion component with styled components. In particular, I am trying to customize the Trigger component to only fire the dropdown open event ONLY when the chevron is click, not the whole area of the closed accordion.

export const AccordionTrigger = React.forwardRef(
  ({ children, ...props }, forwardedRef) => (
    <StyledHeader>
      <StyledTrigger {...props} ref={forwardedRef}>
        {children}
        <StyledChevron aria-hidden />
      </StyledTrigger>
    </StyledHeader>
  )
) as typeof AccordionPrimitive.Trigger

This is then used in the main Accordion component:

export const Accordion: React.FC<AccordionProps> = (props) => {
  const { items } = props
  return (
    <AccordionRoot type='multiple'>
      {items.map((item) => (
        <AccordionItem value={item.title} key={item.title}>
          <AccordionTrigger>{item.title}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </AccordionRoot>
  )
}

What would be a good first step towards doing that, and is it possible?

[joaom00]

I guess you can move Trigger just to the chevron

<Accordion.Header>
  Is it accessible?
  <Accordion.Trigger>
    <Chevron />
  </Accordion.Trigger>
</Accordion.Heading>

[MahemaS27]

Thank you! this worked great :)