[#53767] fix: focus input field after selecting a filter

opf · Oct 21, 2024 · c35f878 · c35f878
1 parent bb3cceb
commit c35f878
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git 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"
                             }
   %>
 </label>

diff --git a/app/views/filters/date/_days.html.erb b/app/views/filters/date/_days.html.erb
@@ -4,10 +4,11 @@
         <span class="inline-label">
           <%= 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 %>
-          <label for="value" class="form-label -transparent">days</label>
+          <label for="<%= "#{filter.name}_value" %>" class="form-label -transparent">days</label>
          </span>
     </div>
   </div>

diff --git 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
@@ -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