Skip to content

Global Search - Replace deprecatedJqueryDropdown with GlDropdown

What

The dropdown in question is here:

Screen_Shot_2021-01-12_at_10.23.25_AM

We found some bugs to the JavaScript event handlers found in the legacy dropdown. More can be read here: #254409 (comment 482784426)

We also are wanting to add enhancements to the dropdown here: #284139 (closed)

Why

The root cause of the bug seems to be missing event handlers in the deprecated component. Adding a fix to a deprecated component seems like a poor use of time since we should be moving away from it when possible. Since the bug is pretty niche and we also have enhancements to the component already slotted. I felt that going ahead and replacing the component with Pajama's GlDropdown seems like the best approach. We can hit a few birds with one stone by doing so.

How

My recommendation is to do this iteratively behind a feature flag so we can be sure to regression in production as well as be sure that all the existing functionality makes it over into the updated component.

Proposed Feature Flag - (:global-search-updated-dropdown)
File to be replaced: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/search_autocomplete.js

Release Notes

Previously the Header Search located on almost every page in GitLab has existed with several missing features, especially when it comes to Accessibility (A11y). You may have noticed issues such as the tab and arrow keys both focusing different options in the header search. There was also zero Screen Reader support making it impossible for users to navigate it without sight. Finally there was the rare issue where the legacy architecture made it so the header search didn't work at all and left the user without any visual cues.

When using the new and improved Header Search you will immediately notice the proper keyboard functionality. You will be able to properly navigate the Header and Search with your tab and arrow keys. Additionally there is now full Screen Reader support allowing for navigation without any visual cues. Along with this we have added numerous performance increases through our up to date component architecture. This new architecture will allow for more exciting functionality to be added in the near future!

In the coming days CE customers will begin to see the new search live on GitLab.com. EE customers will have to wait a bit for a full release but can activate it now with the instance feature flag :new_header_search

Empty Search W/ Search A11y Demo
Default_Searches W__Search A11y_Support
Edited by Zack Cuddy