Improve search box for filter dropdowns on vulnerability page
What does this MR do?
On the vulnerability report for a project, there are filter dropdowns that lets the user filter the vulnerability list:
![]() |
This MR does the following:
1. When the dropdown is opened, auto focus on the search box if there is one:
Before | After |
---|---|
![]() |
![]() |
This matches the behavior of other dropdowns-with-search in GitLab, for example the label selector on the issue page:
![]() |
Filter...
to Search
.
2. Change the placeholder text in the dropdown's search box from This matches the placeholder text used in other dropdowns in GitLab (see above screenshot).
dropdown-show
and dropdown-hide
events when the dropdown is opened/closed.
3. Emit This lets the parent component that uses filter-body.vue
to respond to the dropdown opening and closing. These events aren't used in this MR, but will be used in a subsequent MR, so this is preparation work.
4. Hide the autocomplete for the search box.
The autocomplete list hides the dropdown items:
![]() |
5. Make the search box always show at the top instead of scrolling.
Before | After |
---|---|
![]() |
![]() |
How to test locally
- Follow these steps to populate the vulnerability report: https://gitlab.com/-/snippets/1956676
- Open
ee/app/assets/javascripts/security_dashboard/components/filters/standard_filter.vue
and change:show-search-box="showSearchBox"
to:show-search-box="true"
. By default the search box is only shown if there are 20 items or more, this forces it to always show:
<template>
<filter-body
...
:show-search-box="true"
>
Does this MR meet the acceptance criteria?
Conformity
- [-] Changelog entry
- [-] Documentation (if required)
-
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
-
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers - [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Related to #284471 (closed)
Edited by Daniel Tian