dequelabs / dequelabs/cauldron

AccordionTrigger: className prop replaces rather than appending

Open Beginner friendly
#2,480 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

### Steps to reproduce

```tsx

trigger
content

```

### Expected Behavior

Should result in a trigger button with classes like `Accordion__trigger ExpandCollapse__trigger extraTriggerClass`

(it actually results in `extraTriggerClass ExpandCollapse__trigger`)

### Root cause

The bug is a prop-spread ordering issue in `Accordion.tsx:98-107`:

```tsx

```

Tracing the reproduction (``):

1. Line 101 composes the intended value: `"Accordion__trigger extraTriggerClass"`.
2. Line 104 spreads `{...trigger.props}` *after* the explicit `className`. Since `trigger.props` contains `className: "extraTriggerClass"`, the later spread **overwrites** the composed value. `PanelTrigger` receives just `"extraTriggerClass"` — `Accordion__trigger` is silently dropped.
3. `PanelTrigger.tsx:41` then composes its own: `classnames("extraTriggerClass", 'ExpandCollapse__trigger', ...)` → `"extraTriggerClass ExpandCollapse__trigger"`.

### Version

7.2.0

### What browser(s) are you experiencing the problem on?

Chrome

### Relevant log output

```shell

```

Contributor guide

Open the contributing guide

Research direction

Start in Accordion.tsx at lines 98-107 and trace the AccordionTrigger reproduction through PanelTrigger.tsx line 41. Verify the prop ordering and class composition; done when the trigger retains Accordion__trigger, ExpandCollapse__trigger, and extraTriggerClass in the expected result.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
82/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.