shadcn-vue
shadcn-vue copied to clipboard
[Feature]: Allow parent control over portal/teleport behavior in ComboboxList for improved mobile usability
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
usePortalistrue, the content is teleported via ComboboxPortal (current behavior). - When
usePortalisfalse, 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.