MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-1346

13 Advanced filter: condition dropdown panels are cut off by the filter Popover (MultiSelectPicker unclamped; nested scroll defeats Combobox clamp)

Done
Description

Type · UI defect (overflow clipping of nested floating panels)

Parent · Root sibling — logged parentless. The related surface is the /items Advanced Filter, delivered under Epic 6: Search, reporting & admin (MOTIR-326), which is done; per the parent rule a bug on a done epic is logged at the root with a single-integer id.

Discovered in · Manual dogfooding of the Advanced Filter on the work-items list.

Root cause / fix · Reproduced + verified against shipped code. The Advanced Filter renders inside a Radix Popover, and a condition row's dropdown panels are clipped by the popover bounds instead of overflowing past them. There are two distinct, compounding causes:

  1. MultiSelectPicker has no clip-aware positioning at all. The is_any_of/is_none_of value pickers (status, members, labels, components) used by the value editors (app/(authed)/items/_components/AdvancedFilterValueEditor.tsx) render their listbox as a plain absolute top-full left-0 panel — components/ui/MultiSelectPicker.tsx:309 — with no flip/clamp logic. So it is clipped by ANY overflow-hidden ancestor. It was never included in the MOTIR-456 sweep (bug-promote-sprint-picker-clipped-inside-popover) that added the inDialog inline-render + nearestClipBox clamp/flip to its sibling primitive Combobox.

  2. Even Combobox's clamp fails here, defeated by a nested scroll container. The field/operator pickers (FilterConditionBuilder.tsx:306–339) are Comboboxes, which clamp/flip via nearestClipBox (components/ui/Combobox.tsx:243–273). But the Advanced Filter wraps its builder body in overflow-y-auto max-h-[60vh] (IssueAdvancedFilter.tsx:218). nearestClipBox stops at the FIRST overflow ancestor; finding that scrolling div it returns scrolls:true and bails (Combobox.tsx:255–259 → no flip/clamp, falls back to a 256px inline menu). The REAL hard clip, however, is the outer Popover.Content, which defaults to overflow-hidden (components/ui/Popover.tsx:95) because IssueAdvancedFilter.tsx:181 does not pass overflowVisible. So the inline menu renders past the scroll box and is cut at the popover edge.

This is the same clipping CLASS as MOTIR-455/456/152/325/462 (dropdown clipped inside a floating container) — but recurring on (a) the one shared picker primitive the MOTIR-456 fix didn't cover, and (b) a scroll-box-inside-hidden-popover nesting the existing clamp doesn't handle.

Fix direction (a closing-out type: code subtask, with a FAILING E2E repro first — open the Advanced Filter popover, add a condition, open the status/member multiselect, assert the full option list is visible and not clipped by the popover bounds):

  • Give MultiSelectPicker the same clip-aware flip/clamp (or inDialog inline-vs-portal split) Combobox has — ideally extract a shared positioning hook so the two primitives stop drifting (the durable fix for the class).
  • Make nearestClipBox walk PAST a scrolling ancestor to also find the nearest NON-scrolling hard clip and clamp/flip against the tighter of the two (fixes the scroll-inside-hidden nesting generally; matches the combobox-in-dialog-clamp-nearest-clip learning).
  • And/or set overflowVisible on the Advanced Filter's Popover.Content (IssueAdvancedFilter.tsx:181) — necessary but not sufficient on its own while the inner overflow-y-auto box still clips.

Resolution · (open — filled by the closing-out subtask when the fix PR merges)