Skip to content

Fix top-nav search bar dropdown on xl displays

What does this MR do?

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/66075 and https://gitlab.com/gitlab-org/gitlab-ce/issues/64120

On "xl" displays (those >=1200px wide), "missed clicks" frequently occur because the top-nav search bar loses focus and starts shrinking/moving when doing "mousedown" in the autocomplete dropdown. By the time of "mouseup", the dropdown has moved, so the full click registers on empty space instead of the link.

On "xl" displays, the top-nav search bar is set to width: 200px when unfocused and expands to width: 320px when focused. It then shrinks back to width: 200px on blur. Thus width:320px is already a proven and usable size for the search bar on "xl" screens. I wanted to preserve the larger size of the bar on "xl" screens, and bring the UI behavior inline with the behavior that already exists for "md" (>=768px wide) and "lg" (>=992px wide) displays, specifically no expansion of the top-nav search bar.

The simplest possible mechanism I see then is to use the proven width: 320px as the unfocused width and the focused width on "xl" displays (just as width: 200px is the unfocused and focused width for "md" and "lg" displays). Since this would no longer reflect an exclusively "active" width, I've renamed the corresponding scss variable. I did a grep of the stylesheets, and this variable is only used in the places I've changed it.

I do not see additional risks with this as I am using a size already in use for the top-nav search bar (320px) and this modified behavior actually brings greater consistency to the top-nav search bar UI, aligning the behavior of "md", "lg", and "xl" displays. For clarity, the top-nav search bar is hidden on displays smaller than "md", thus comparison is not applicable for smaller displays.

Bootstrap Breakpoints for reference: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

Screenshots

Before 1280px

Screen_Shot_2019-08-15_at_11.49.38_AM

After 1280px

Screen_Shot_2019-08-15_at_11.48.27_AM

Before 1920px

Screen_Shot_2019-08-15_at_11.49.13_AM

After 1920px

Screen_Shot_2019-08-15_at_11.49.04_AM

New behavior on "xl" display

new-click-behavior

Old missed click behavior on "xl" display

search-input-missed-click

Does this MR meet the acceptance criteria?

Conformity

Performance and Testing

Edited by Jeremy Elder

Merge request reports