dequelabs / dequelabs/cauldron
Multiselect Combobox: chip row spacing issues when chips wrap to multiple lines
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 31
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 8
Description
## Problem
The multiselect Combobox has several layout issues when selected chips wrap to multiple lines:
1. **No `row-gap` between wrapped chip rows** — chips on adjacent rows sit flush against each other with no vertical spacing
2. **Blurred input creates a phantom flex row** — the inline `` inside `TextFieldWrapper` retains its height when the Combobox loses focus, creating visible empty space after the last chip row
3. **No padding differentiation between empty and populated states** — the same padding applies whether there are 0 chips or many, making the empty Combobox look correct but the populated one either too cramped or too padded
## Current workaround
In axe-reports (dequelabs/axe-reports#3141), we added CSS overrides scoped under a `.multiselect-combobox` wrapper class:
```css
/* Consistent chip row spacing — only when chips are present */
.multiselect-combobox .TextFieldWrapper:has(.ComboboxPill) {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
row-gap: 8px;
}
/* Prevent the inline input from inflating chip row height */
.multiselect-combobox .ComboboxPill ~ input[role="combobox"] {
min-width: 0;
min-height: 0;
padding: 0;
}
/* Hide the input when blurred so it doesn't take a row */
.multiselect-combobox .Combobox:not(:focus-within) .ComboboxPill ~ input[role="combobox"] {
width: 1px;
height: 0;
overflow: hidden;
}
```
## Expected behavior
- Consistent vertical spacing between chip rows (e.g., `row-gap` on `TextFieldWrapper`)
- The input should not create a visible empty row when the Combobox is blurred
- Padding should adapt to whether chips are present (`:has(.ComboboxPill)` or equivalent)
## Affected version
`@deque/cauldron-react` 6.18.5 (also verified on 6.27.0 — same behavior)
Contributor guide
Assessment
This issue has not been assessed yet.