dequelabs / dequelabs/cauldron

Multiselect Combobox: chip row spacing issues when chips wrap to multiple lines

Open
#2,337 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.