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 } }) {