Skip to content

Commit 5987f37

Browse files
authored
Improvement (combobox): respect minimum popover width when trigger is narrow (#397)
<!-- Prefix your title above in brackets with one of ("Bug Fix", "Feature", "Documentation", "Maintenance", "Hotfix", "Improvement") E.g. [Feature] --> ## Description When a `RubyUI::Combobox` trigger is narrower than the popover's natural content (e.g. a short trigger label like "Status"), the popover shrinks to match the trigger width and cuts off the `ComboboxSearchInput` placeholder. `updatePopoverWidth` currently sets `popover.style.width = trigger.offsetWidth + "px"` unconditionally, coupling the popover's width to the trigger's width 1:1. The popover content has its own natural minimum that's independent of the trigger. This PR introduces a `minPopoverWidth` Stimulus value (default `240`) and applies it as a floor inside `updatePopoverWidth` The change is **monotonic**: it only expands popovers that would otherwise be narrower than the floor. Triggers wider than 240px are unaffected (no regression). `resize@window` already calls `updatePopoverWidth`, so the floor holds after viewport changes without any new event listeners. Consumers can override the floor per-instance via the standard Stimulus values API: ```ruby render RubyUI::Combobox.new(data: { "ruby-ui--combobox-min-popover-width-value": 320 }) ... end ``` Before | After :-------------------------:|:-------------------------: <img width="393" height="326" alt="Captura de Tela 2026-05-21 às 16 51 13" src="https://github.com/user-attachments/assets/9e618d90-dadc-4921-b65f-e96063ef81fd" /> | <img width="567" height="311" alt="Captura de Tela 2026-05-21 às 16 56 50" src="https://github.com/user-attachments/assets/f95e5803-ea1e-4807-9889-73e5cd461d59" /> <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Prevents `RubyUI::Combobox` popovers from shrinking below a sensible width when the trigger is narrow, avoiding cut-off placeholders and cramped content. - **Bug Fixes** - Added `minPopoverWidth` Stimulus value (default 240) and apply it as a floor in `updatePopoverWidth`. - Popover width is now `max(trigger width, minPopoverWidth)` and still updates on window resize. - Per-instance overrides supported via `ruby-ui--combobox-min-popover-width-value`. <sup>Written for commit cf1310d. Summary will update on new commits. <a href="https://cubic.dev/pr/ruby-ui/ruby_ui/pull/397?utm_source=github">Review in cubic</a></sup> <!-- End of auto-generated description by cubic. -->
1 parent 48d7960 commit 5987f37

1 file changed

Lines changed: 4 additions & 2 deletions

File tree

gem/lib/ruby_ui/combobox/combobox_controller.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
44
// Connects to data-controller="ruby-ui--combobox"
55
export default class extends Controller {
66
static values = {
7-
term: String
7+
term: String,
8+
minPopoverWidth: { type: Number, default: 240 }
89
}
910

1011
static targets = [
@@ -186,6 +187,7 @@ export default class extends Controller {
186187
}
187188

188189
updatePopoverWidth() {
189-
this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`
190+
const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)
191+
this.popoverTarget.style.width = `${width}px`
190192
}
191193
}

0 commit comments

Comments
 (0)