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