diff --git a/app/views/filters/_boolean.html.erb b/app/views/filters/_boolean.html.erb index 983afb848aa9..c4b28a2b49a3 100644 --- a/app/views/filters/_boolean.html.erb +++ b/app/views/filters/_boolean.html.erb @@ -6,6 +6,7 @@ name: "v-" + filter.class.key.to_s, checked: filter.values.first != 'f', filterName: 'boolean', + id: "#{filter.name}_value" } %> diff --git a/app/views/filters/date/_days.html.erb b/app/views/filters/date/_days.html.erb index 21fdef40d8ce..7eb556b45e02 100644 --- a/app/views/filters/date/_days.html.erb +++ b/app/views/filters/date/_days.html.erb @@ -4,10 +4,11 @@ <%= number_field_tag :value, value, + id: "#{filter.name}_value", class: 'advanced-filters--text-field -slim', 'data-filter--filters-form-target': 'days', 'data-filter-name': filter.name %> - + 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 1a35b40d5943..ab254b9bcfdd 100644 --- a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts @@ -204,11 +204,28 @@ export default class FiltersFormController extends Controller { this.addFilterSelectTarget.selectedIndex = 0; this.setSpacerVisibility(); + this.focusFilterValueIfPossible(selectedFilter); + if (this.performTurboRequestsValue) { this.sendForm(); } } + // 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; } + + const valueField = element.querySelector('.advanced-filters--filter-value input') as HTMLInputElement; + if (valueField) { + valueField.focus(); + return; + } + + const select = element.querySelector('.advanced-filters--filter-value select') as HTMLSelectElement; + select?.focus(); + } + removeFilter({ params: { filterName } }:{ params:{ filterName:string } }) { const filterToRemove = this.findTargetByName(filterName, this.filterTargets); filterToRemove?.classList.add('hidden'); diff --git a/spec/features/projects/projects_index_spec.rb b/spec/features/projects/projects_index_spec.rb index 18179dd78f44..8598e109ed5e 100644 --- a/spec/features/projects/projects_index_spec.rb +++ b/spec/features/projects/projects_index_spec.rb @@ -1590,6 +1590,9 @@ def load_and_open_filters(user) expect(page).to have_select("add_filter_select") # Filter for column is visible and can now be specified by the user expect(page).to have_css(".advanced-filters--filter-name[for='created_at']") + + # The correct filter input field has focus + expect(page.has_focus_on?(".advanced-filters--filter-value input#created_at_value")).to be(true) end it "adds the filter for a selected column that has a different filter mapped to its column" do