diff --git a/app/views/filters/_autocomplete.html.erb b/app/views/filters/_autocomplete.html.erb
index 551098352ab3..57a5df7653b7 100644
--- a/app/views/filters/_autocomplete.html.erb
+++ b/app/views/filters/_autocomplete.html.erb
@@ -13,6 +13,7 @@
# Stimulus controller.
}.merge(autocomplete_options.except(:component)),
class: 'form--field',
+ id: "#{filter.name}_value",
data: {
'filter-autocomplete': true,
'filter--filters-form-target': 'filterValueContainer',
diff --git a/app/views/filters/list/_select.html.erb b/app/views/filters/list/_select.html.erb
index 65b73b071b8f..0257656f29a9 100644
--- a/app/views/filters/list/_select.html.erb
+++ b/app/views/filters/list/_select.html.erb
@@ -9,7 +9,8 @@
{
class: 'form--select -slim',
'data-filter--filters-form-target': 'filterValueSelect',
- 'data-filter-name': filter.name
+ 'data-filter-name': filter.name,
+ id: "#{filter.name}_value"
}]
if multi_value
select_options.third[:multiple] = true
diff --git a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
index ab254b9bcfdd..661600cbf038 100644
--- a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
+++ b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
@@ -214,16 +214,27 @@ export default class FiltersFormController extends Controller {
// Takes an Element and tries to find the next input or select child element. This should be the filter value.
// If found, it will be focused.
focusFilterValueIfPossible(element:undefined|HTMLElement) {
- if (!element) { return; }
+ if (!element) return;
+
+ // Try different selectors for various filter styles. The order is important as some selectors match unwanted
+ // hidden fields when used too early in the chain.
+ const selectors = [
+ '.advanced-filters--filter-value ng-select input',
+ '.advanced-filters--filter-value input',
+ '.advanced-filters--filter-value select',
+ ];
- const valueField = element.querySelector('.advanced-filters--filter-value input') as HTMLInputElement;
- if (valueField) {
- valueField.focus();
- return;
- }
+ selectors.some((selector) => {
+ const target = element.querySelector(selector) as HTMLElement;
- const select = element.querySelector('.advanced-filters--filter-value select') as HTMLSelectElement;
- select?.focus();
+ if (target) {
+ target.focus();
+ // We have found and focused our element, abort the iteration.
+ return true;
+ }
+
+ return false;
+ });
}
removeFilter({ params: { filterName } }:{ params:{ filterName:string } }) {