Find-in-page matches elements in hidden dropdowns of the dashboard

RESOLVED WONTFIX

Status

Mozilla Metrics
Frontend Reports
--
minor
RESOLVED WONTFIX
5 years ago
3 years ago

People

(Reporter: MattN, Unassigned)

Tracking

unspecified
Unreviewed

Details

(URL)

The Chosen library used for the dropdown filtering has a bug that causes find-in-page to match text in hidden dropdowns of the dashboard. This is very annoying for dashboard such as the slow SQL one where all of the queries are listed in the dropdown and it's common to want to search through the results at the bottom of the page.

The Chosen library currently just positions the left edge of the dropdown at -9000px and doesn't hide the element which is why find-in-page matches text there.  I've commented in the existing upstream issue about this at [1] but in the meantime we can workaround this UX annoyance in modern browsers using CSS without modifying the upstream code:

  .chzn-single:not(.chzn-single-with-drop) + .chzn-drop {
    visibility: hidden;
  }

[1] https://github.com/harvesthq/chosen/pull/588#issuecomment-13811140
The userContent.css equivalent workaround is:

@-moz-document domain(metrics.mozilla.com) {
  .chzn-single:not(.chzn-single-with-drop) + .chzn-drop {
    visibility: hidden;
  }
}

Comment 2

5 years ago
Needs PM review
This dashboard no longer exists, if I recall correctly. If it does, please re-open with more details about where it is.
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.