search input dropdown autocomplete prematurely reduces width
Summary
The search input and autocomplete dropdown move out from underneath a mouse click on large screens. This seems to happen because the width of the search input is reduced on a "blur" event. If you don't release your click quickly or anticipate the movement by clicking on the far right of the dropdown, the item you are trying to select moves away and your click doesn't get registered on that element. Click behavior should work more like arrow key behavior, where the full width of the search input is kept while making a selection.
Steps to reproduce
- Must have a full size browser window (width >1200px, half-screen windows won't show the bug)
- Click into the the search input bar (in the header of most Gitlab pages)
- Wait for the autocomplete dropdown to appear
- mousedown, beginning the click, on the left half of any of the clickable dropdown options
- Watch the dropdown move out from under the cursor
- mouseup, releasing the click. Nothing happens because you clicked empty space.
Example Project
Gitlab.com
What is the current bug behavior?
The search input box shrinks its width prematurely
What is the expected correct behavior?
Click behavior should be more like the arrow key behavior (see screenshots), in that bringing the focus to the autocomplete dropdown doesn't cause the input box to shrink before an element in the dropdown is fully clicked.
Relevant logs and/or screenshots
Missed click (bad behavior)
Arrow key (good behavior)
Output of checks
This bug happens on GitLab.com
Results of GitLab environment info
This bug happens on GitLab.com
Results of GitLab application Check
This bug happens on GitLab.com
Possible fixes
Although I am using Gitlab.com EE, relevant links for the CE edition are below.
Search input html here
The search-active class styles here
The search-active class gets added here on focus
The search-active class gets removed here on blur
Arrow key handling for blur and focus seems to be defined here