Skip to content

[BUG] Combobox dropdown floats when flipped above trigger and items are filtered #83

Description

@ephe-meral

Describe the bug

When a Combobox dropdown flips to the top placement (not enough viewport space below the trigger), filtering the items by typing causes the popup to float at wrong coordinates instead of staying anchored to the trigger.

The root cause is in position.js: autoUpdate is called with elementResize: false by default, so Floating UI's ResizeObserver is never attached to the floating element. When items are hidden by data-show filtering, the popup's height shrinks — but position is never recalculated. Since the top placement computes Y = trigger_top − popup_height − offset, a shrunken popup stays frozen at the original large-height coordinates and visually detaches from its trigger.

The bug does not occur for bottom placement because changes in popup height don't affect Y = trigger_bottom + offset.

Minimal Reproducible Example

from starhtml import *
from starui import *

app, rt = star_app()

@rt('/')
def home():
    # Place near the bottom of the page so the dropdown is forced to flip upward
    return Div(
        Div(style="height:80vh"),  # push combobox near bottom of viewport
        Combobox(
            ComboboxTrigger(placeholder="Search countries..."),
            ComboboxContent(
                ComboboxEmpty("No country found."),
                ComboboxItem("United States", value="us"),
                ComboboxItem("United Kingdom", value="uk"),
                ComboboxItem("Germany", value="de"),
                ComboboxItem("Japan", value="jp"),
                ComboboxItem("Brazil", value="br"),
                ComboboxItem("Switzerland", value="ch"),
            ),
            signal="cb_country",
        )
    )

serve()

Example from project home page:

Image

Steps to reproduce:

  1. Open the page in a browser window short enough that the combobox is near the bottom
  2. Click the trigger — the dropdown opens above the trigger (flip to top)
  3. Type a letter that matches several items (dropdown shrinks slightly but stays anchored) ✓
  4. Keep typing until very few or zero items match — the popup height collapses
  5. The popup floats far above the trigger instead of staying anchored ✗

Also reproducible on the live docs site at https://ui.starhtml.com/components/combobox — open any combobox near the bottom of a short viewport.

Expected behavior

The dropdown should remain anchored to the trigger at all times, regardless of content height changes caused by filtering.

Root cause and proposed fix

In typescript/plugins/position.ts, the start() function calls autoUpdate with elementResize: false hardcoded as the default. isPopover is already computed earlier in the same closure.

Current:

elementResize: au.elementResize ?? false,

Proposed fix:

elementResize: au.elementResize ?? isPopover,

This keeps elementResize: false for non-popover positioned elements (no behaviour change) and enables it by default for popover elements, where content height changes are common and directly affect the Y coordinate.

Workaround until fixed — add this script to the page head before position.js loads:

<script>window.__starhtml_position_config = {autoUpdate: {elementResize: true}}</script>

Environment Information

  • starhtml version: 0.7.0
  • fastcore version: 1.13.6
  • Python version: 3.13.5

Confirmation

  • I have provided a minimal reproducible example
  • I have included the versions of starhtml, fastcore, and Python
  • I understand that this is a volunteer open source project with no commercial support.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions