-
Notifications
You must be signed in to change notification settings - Fork 30
Description
Description
Problem
ebay-combobox currently renders its dropdown overlay downward by default. In certain constrained layouts (e.g., within modals or scrollable containers), this behavior can cause issues:
- The dropdown forces the parent container (such as a modal) to become scrollable.
- This degrades UX and, in some cases, is not feasible for the design.
- Inline styles are dynamically applied to the overlay, making it difficult to override positioning purely via CSS without resorting to
!important.
In our use case, rendering the dropdown upward avoids these issues entirely and aligns with expected interaction behavior in constrained vertical space.
Proposed Enhancement
Add a configurable option to ebay-combobox that allows consumers to control dropdown placement, for example:
-
placement="auto" | "down" | "up"auto(default): current behavior / existing logicdown: force downward renderingup: force upward rendering
This would ideally integrate with (or expose) the underlying positioning logic already used by the overlay/floating UI layer.
Benefits
- Enables
ebay-comboboxto work cleanly inside modals and scroll containers. - Eliminates the need for CSS overrides and
!importanthacks. - Makes dropdown behavior more predictable and reusable across products.
- Aligns with common patterns in other UI libraries that support explicit placement control.
Current Workaround
To meet our immediate needs, we had to force upward rendering using CSS overrides, including !important, because positioning styles are applied dynamically to the overlay. This is brittle and not ideal for long-term maintenance, which is why we’re proposing a first-class API instead.
Screenshots
No response
Figma link
No response
Engineering pre-requisites
- Successful design review with Design System Team.
- Supports dark mode.
- Supports responsive design.
- Tokens have been provided (or already exist).
- Successful accessibility review with Core A11Y Team and MIND pattern is created.
- Successful frontend review with eBayUI Team.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status