Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

fix(ui-web): model picker closes when its own list is scrolled

Open Beginner friendly
  • Is something wrong?
#997 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

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

Research direction

Start with the capture-phase scroll listener in ui-web/src/components/ModelPicker.tsx and reproduce the model picker in the agent detail dialog. Update it so scrolling .model-picker-right does not dismiss the picker, while scrolling the underlying agent list still does; also compare the scroll handling in features/model/ModelPicker. Verify the behavior in the WebUI on the agents page.

Written by the indexing model from the issue text.

Description

Symptom

In the WebUI, when assigning a model to an already-added agent (the agent detail dialog, e.g. "Pi"), the model picker popover opens correctly. But as soon as the model list inside the picker is scrolled down even slightly, the whole picker panel closes.

Root cause

ui-web/src/components/ModelPicker.tsx registers a capture-phase scroll listener on document (around lines 97-117) whose intent is to close the floating panel when the underlying agent card list scrolls out from under it. The handler closes the panel whenever the anchor's getBoundingClientRect().top moves by more than 1px:

const off = (): void => {
  if (Math.abs(anchor.getBoundingClientRect().top - was) > 1) onClose()
}
document.addEventListener('scroll', off, true)

Because the listener is on document in capture phase, it also receives scroll events from the picker's own right-hand model list (.model-picker-right). Scrolling that inner list shifts the anchor row's geometry (the enclosing agent dialog re-centres / layout shifts), the top delta exceeds the threshold, and onClose() fires - so the picker dismisses itself on its own scroll.

The in-code comment already half-acknowledges this ("the model list inside this panel is its own scroller, and the listener below is on the document in capture phase, so choosing a model reaches it") but only handles the resize baseline case, not scrolls originating inside the panel.

Suggested fix

Ignore scroll events whose target is inside the picker itself:

const off = (e: Event): void => {
  if (box.current && e.target instanceof Node && box.current.contains(e.target)) return
  if (Math.abs(anchor.getBoundingClientRect().top - was) > 1) onClose()
}

Scrolls of the underlying agent list still close the panel (original intent preserved); scrolls of the picker's own model list no longer do.

Notes

  • The file header marks this component as DEBT: features/model/ModelPicker is the rewrite and this copy survives only for the agents page. Worth checking whether the newer implementation has the same capture-phase scroll-dismiss pattern.
  • Reproduced on the agents page, agent detail dialog, model dropdown, on Windows 11 + Chrome.
Dominant language
Python
Stars
4.1k
Forks
94
Avg merge
15h 38m
Merged PRs (30d)
400

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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 EverMind-AI/Raven

All issues in EverMind-AI/Raven

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.