Clean up some CSS and JS. wp/74380

frontend/src/global_styles/content/_advanced_filters.sass

@@ -139,9 +139,6 @@ $advanced-filters--grid-gap: 10px
 .op-filters-form .hidden
   display: none !important
 
-.op-filters-form .FormControl:has([data-filter--filters-form-target~="filterValueContainer"].hidden)
-  display: none !important
-
 .op-filters-form
   display: none
   margin-top: 1rem

frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts

@@ -101,20 +101,22 @@ export default class FiltersFormController extends Controller {
   });
 
   private boundListener:() => void;
+  private boundClearListener:(event:MouseEvent) => void;
 
   initialize() {
     // Initialize runs anytime an element with a controller connected to the DOM for the first time
     this.boundListener = debounce(this.sendForm.bind(this), 300);
+    this.boundClearListener = (event:MouseEvent) => this.clearInputWithButton(event);
   }
 
   connect() {
     const clearButton = document.getElementById(this.clearButtonIdValue);
-    clearButton?.addEventListener('click', (event:MouseEvent) => this.clearInputWithButton(event));
+    clearButton?.addEventListener('click', this.boundClearListener);
   }
 
   disconnect() {
     const clearButton = document.getElementById(this.clearButtonIdValue);
-    clearButton?.removeEventListener('click', (event:MouseEvent) => this.clearInputWithButton(event));
+    clearButton?.removeEventListener('click', this.boundClearListener);
   }
 
   addFilterSelectTargetConnected() {

spec/support/components/common/filters.rb

@@ -31,6 +31,8 @@
 module Components
   module Common
     module Filters
+      include ::Components::Autocompleter::NgSelectAutocompleteHelpers
+
       def expect_filters_container_toggled
         expect(page).to have_css(".op-filters-form")
       end

spec/support/pages/admin/users/index.rb

@@ -34,7 +34,7 @@ module Pages
   module Admin
     module Users
       class Index < ::Pages::Page
-        include ::Components::Autocompleter::NgSelectAutocompleteHelpers
+        include ::Components::Common::Filters
 
         def path
           "/users"
@@ -75,13 +75,11 @@ module Pages
 
         def filter_by_status(value)
           open_filter_panel
-          unless page.has_css?("li.advanced-filters--filter[data-filter-name='status']:not(.hidden)")
+          unless page.has_css?(".advanced-filters--filter[data-filter-name='status']")
             select "Status", from: "add_filter_select"
           end
-          # Status renders a single-select and a hidden multi-select side by side;
-          # both share id="status_value". Scope to the visible single-select to disambiguate.
-          within("li.advanced-filters--filter[data-filter-name='status']:not(.hidden) .single-select") do
-            select value, from: "status_value"
+          within(".advanced-filters--filter[data-filter-name='status']") do
+            set_autocomplete_filter([value])
           end
 
           wait_for_network_idle

spec/support/pages/portfolios/index.rb

@@ -34,7 +34,6 @@ module Pages
   module Portfolios
     class Index < ::Pages::Page
       include ::Components::Common::Filters
-      include ::Components::Autocompleter::NgSelectAutocompleteHelpers
 
       def path(*)
         "/portfolios"

spec/support/pages/projects/index.rb

@@ -34,7 +34,6 @@ module Pages
   module Projects
     class Index < ::Pages::Page
       include ::Components::Common::Filters
-      include ::Components::Autocompleter::NgSelectAutocompleteHelpers
 
       def path(*)
         "/projects"