shadcn-vue icon indicating copy to clipboard operation
shadcn-vue copied to clipboard

[Feature]: Allow parent control over portal/teleport behavior in ComboboxList for improved mobile usability

Open kaspernowak opened this issue 4 months ago • 0 comments

Describe the feature

Problem The ComboboxList component in shadcn-vue wraps the reka-ui ComboboxContent with ComboboxPortal by default. This architectural decision—made in shadcn-vue, not reka-ui—prevents end users from controlling whether the dropdown content is rendered inline or teleported. The lack of control leads to significant usability issues on mobile devices, where teleporting the dropdown causes the combobox to become difficult or impossible to use, especially when the on-screen keyboard is visible.

Why this matters

  • Mobile UX: When the dropdown is teleported, it often appears in a location, or an item is focused in a way, that is not user-friendly on mobile, making the combobox nearly unusable as an input with a dropdown.

  • Flexibility: End users should be able to opt for truly inline rendering of the dropdown content when needed, simply by toggling a prop, without having to rewrite the component.

Proposed solution Add a usePortal prop to ComboboxList.vue, defaulting to true for backwards compatibility.

  • When usePortal is true, the content is teleported via ComboboxPortal (current behavior).
  • When usePortal is false, the dropdown is rendered inline, solving the mobile usability problem.

Alternatives considered Editing or duplicating ComboboxList: Not maintainable and not user-friendly.

Additional context This change would make it possible for consumers of shadcn-vue to use the combobox component in mobile contexts where inline rendering is required for a good user experience.

Additional information

  • [x] I intend to submit a PR for this feature.
  • [x] I have already implemented and/or tested this feature.

kaspernowak avatar Jul 14 '25 10:07 kaspernowak