Skip to content

fix(combobox): prevent collapse to 1px in flex align-items:center containers#2237

Open
yordan-st wants to merge 1 commit into
mendix:mainfrom
yordan-st:fix/WC-3409_combobox-bug
Open

fix(combobox): prevent collapse to 1px in flex align-items:center containers#2237
yordan-st wants to merge 1 commit into
mendix:mainfrom
yordan-st:fix/WC-3409_combobox-bug

Conversation

@yordan-st
Copy link
Copy Markdown
Contributor

@yordan-st yordan-st commented May 29, 2026

Summary

  • Fixes WC-3409: Combobox collapses to 1px when placed in a flex row container with align-items: center
  • Root cause: Mendix injects .form-group.no-columns (column flex, no explicit width) between the user's container and .widget-combobox. flex-grow: 1 distributes height in a column container, not width. Children suppress min-width to ~0 via min-width: 0 on .widget-combobox-selected-items (intentional, needed for multiselect tag wrapping)
  • Fix: min-width: 15ch on .widget-combobox — explicit value does not ask children, breaking the collapse chain. ch scales with font-size rather than using px

Changes

  • src/ui/Combobox.scssmin-width: 15ch on .widget-combobox root rule
  • src/__tests__/ComboboxStyles.spec.ts — unit test updated to assert 15ch
  • e2e/Combobox.spec.js — E2E regression tests added (pending Studio Pro test page at /p/combobox-flex-layout)
  • openspec/changes/fix-combobox-flex-collapse/ — design artifacts with corrected root cause analysis

Test plan

  1. Create a new page in Studio Pro with a container whose CSS class applies display: flex; flex-flow: row; align-items: center (e.g. add a class row-center and define it in a custom stylesheet).
  2. Place a Combobox widget (single-select, connected to any enumeration attribute) inside that container.
  3. Run the app locally and open the page.
  4. Before the fix: the combobox is invisible (collapses to ~1px width). After the fix: the combobox renders with a visible width (≥ 15ch).
  5. Repeat steps 1–4 with a multi-select Combobox to confirm the same result.
  6. Verify that typing in the combobox input and selecting a value still works normally.

Override

To restore previous behavior: .widget-combobox { min-width: 0; } in app CSS.

@yordan-st yordan-st requested a review from a team as a code owner May 29, 2026 14:35
@yordan-st yordan-st closed this May 29, 2026
@yordan-st yordan-st reopened this May 29, 2026
@yordan-st yordan-st force-pushed the fix/WC-3409_combobox-bug branch from afca5ab to 84a04df Compare May 29, 2026 14:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant