Skip to content

ebay-combobox: option to render dropdown upward #395

@joelkraft

Description

@joelkraft

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 logic
    • down: force downward rendering
    • up: 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-combobox to work cleanly inside modals and scroll containers.
  • Eliminates the need for CSS overrides and !important hacks.
  • 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

Projects

Status

Todo

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions