[#53767] ensure focus for autocompleter and multi select

opf · Oct 21, 2024 · b17c566 · b17c566
1 parent abd6861
commit b17c566
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 } }) {