Sort/filter dropdowns open at wrong position after scrolling

Open Beginner friendly
#2,198 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start in src/actions/anchor.ts and inspect how the anchor position is calculated and how the popover toggle is handled. Recalculate the button position when the toggle event reports newState === 'open', then verify on /shows after scrolling that each Sort, Per Page, and Type dropdown opens directly below its button.

Written by the indexing model from the issue text.

Description

Bug

The Sort, Per Page, and Type filter dropdowns on the /shows page open at the wrong
screen position if the user has scrolled down before clicking them.

Steps to Reproduce

  1. Go to /shows
  2. Scroll down the page
  3. Click any of the filter buttons (Type, Per Page, Sort)

Expected

Dropdown opens directly below the button that was clicked.

Actual

Dropdown appears offset — anchored to where the button was when the page first loaded,
not its current viewport position.

Root Cause

src/actions/anchor.ts calculates button position via getBoundingClientRect() but
only recalculates on resize and ResizeObserver — never when the popover opens.
After scrolling, the cached position is stale.

Fix

Listen for the popover toggle event and recalculate position when newState === 'open'.

Dominant language
Svelte
Stars
1.2k
Forks
515
Avg merge
23h
Merged PRs (30d)
13

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from syntaxfm/website

All issues in syntaxfm/website

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.