Some custom dropdown UI widgets stay fixed and don't move with scroll

RESOLVED FIXED

Status

()

defect
P3
normal
RESOLVED FIXED
a year ago
11 months ago

People

(Reporter: janx, Assigned: kohei)

Tracking

({regression})

Production
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

Reporter

Description

a year ago
Posted image detached-widget.png
STR:
1. Visit https://bugzilla.mozilla.org/enter_bug.cgi in Firefox Nightly (I use 61.0a1 build 20180402111808 on Windows 10 on a touch-enabled Dell XPS 13)
2. Searching for a component (e.g. "widget"), a native suggestions list widget appears under the input field
3. Try scrolling down with the suggestions list still visible

Expected result:
- The suggestions list should remain anchored to the page, right under the input field

Actual result:
- The suggestions list stays fixed on screen regardless how much you scroll

See attached screenshot.

When moving the focus in and out of the window, the widget seems to snap back under the input field.
This isn't a native autocomplete widget, it's just a position:absolute element on the page.  But it is a bug that it's not scrolling with the rest of the page.
Component: Layout: Form Controls → Layout: R & A Pos
Priority: -- → P3
Is it? I think it's not. This is a BMO bug if anything, positioning here shouldn't be affected by scroll, it's a child of the <body>.
Since it's position:absolute it should scroll up as you scroll the page, right?
Ah, I didn't realize there are two scrollable things.  The <body> and the #bugzilla-body.  So you're right, this is just a BMO bug.
Assignee: nobody → ui
Component: Layout: R & A Pos → User Interface
Product: Core → Bugzilla
QA Contact: default-qa
Version: 47 Branch → unspecified
Assignee: ui → nobody
Component: User Interface → Extensions: BMO
Product: Bugzilla → bugzilla.mozilla.org
QA Contact: default-qa
Version: unspecified → Production
Duplicate of this bug: 1458478
Component: Extensions: BMO → User Interface
I think “native” is a wrong term here. It’s an custom element.
Summary: Some native UI widgets stay fixed and don't move with scroll → Some custom dropdown UI widgets stay fixed and don't move with scroll
Posted file pull request
We might want to eventually replace the jQuery plug-in with an accessible alternative, but this PR fixes the current issue due to the fixed global header.
Assignee: nobody → kohei.yoshino
Status: NEW → ASSIGNED
Merged to master.
Status: ASSIGNED → RESOLVED
Last Resolved: 11 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.