Skip to content

Remove arbitrary 5000 pixel check in search_combobox.js #63

@dev-guy

Description

@dev-guy

Improve combobox sticky header behavior to prevent disappearance and add smooth transitions.

Sticky headers would disappear due to an arbitrary distanceFromOrigin > 5000 check. This PR replaces that with a viewport-based visibility logic, ensuring headers remain sticky as long as their group is in view. It also introduces smooth transform animations for overlapping headers, preventing abrupt disappearances.

The must be written to handle any number of groups and must not assume there is some maximum number of groups.

Start and restart the server via "mix restart"

Sticky Headers

Visual Indicators of Success

  • ✅ NO vertical lines ABOVE headers - only horizontal lines BELOW headers
  • ✅ First header sticks immediately when scrolling starts
  • ✅ Headers transition smoothly (push-up effect)
  • ✅ No artificial padding or gaps in the content area below headers
  • ✅ The scrollbar starts at the top of the combobox regardless of the number of sticky headers

Test 1

  1. Open the combobox
  2. Use the mouse wheel to scroll down
  3. Expected Result:
    • The FIRST group's header should ALWAYS remain visible at the top as a sticky header
    • It should NOT disappear when you start scrolling
  4. Continue scrolling until the first group's content is completely scrolled out of view
  5. Expected Result: The first header should always be visible and appear above the second header

Test 2

Repeat the above test but click drag the scrollbar down instead

Test 3

Repeat the above test but use the down arrow key instead

Test 4

  1. open combobox
  2. collapse the first header
  3. up arrow 10 times

actual: Zimbabwe is highlighted , which is correct

bug: The header for the first group is overwritten by country names. If you press up arrow more times you will see different country names.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions