Skip to content

Prevent dropdowns from overflowing the viewport

The following discussion from !3407 (merged) should be addressed:

  • @danmh started a discussion: (+4 comments)

    issue(non-blocking): When using the fluidWidth prop the dropdown can be wider than the viewport width.

    suggestion: dropdown should not be allowed to be wider than the viewport. Do you agree? Is this possible?

After adding the ability for dropdowns to have a fluid width in !3384 (merged) and !3407 (merged), we have noticed that, in rare cases, they could overflow the viewport.

This can be seen in the with-long-content story: http://2209-fixed-and-fluid-width-dropdowns.34.140.25.101.nip.io/?path=/story/base-new-dropdowns-listbox--with-long-content

Screenshot_2023-04-20_at_7.33.30_AM

For this to happen, the dropdown must contain some long, non-wrapping content that would prevent it from resizing itself as the viewport becomes narrower.

We have identified ways to prevent this from happening. Specifically, Floating UI, the successor of Popper.js, exposes a size middleware that would make it straightforward to address this.

auto_width

As part of this issue, we'd like to understand when this edge-case might actually happen in one of our projects. If we really are affected, it might be worth investing some engineering effort to fix it. /cc @danmh