DEV: select-kit autoFilterable improvements (#36241)

Yuriy Kurant · web-flow · commit f74a4385a0dc · 2025-11-26T16:18:42.000+08:00
As a follow-up of #36218. * decrease a threshold number from `>15` to `>=10` for filter to render * add const `FILTER_VISIBILITY_THRESHOLD` as a single source of truth for controlling when filter should be shown * changes hardcoded threshold with imported `FILTER_VISIBILITY_THRESHOLD` in combo-box * consolidate usage of `visible: true` in specs
diff --git a/frontend/discourse/select-kit/components/category-drop.js b/frontend/discourse/select-kit/components/category-drop.js
@@ -13,6 +13,7 @@ import CategoryDropMoreCollection from "discourse/select-kit/components/category
 import CategoryRow from "discourse/select-kit/components/category-row";
 import ComboBoxComponent from "discourse/select-kit/components/combo-box";
 import {
+  FILTER_VISIBILITY_THRESHOLD,
   MAIN_COLLECTION,
   pluginApiIdentifiers,
   selectKitOptions,
@@ -90,7 +91,10 @@ export default class CategoryDrop extends ComboBoxComponent {
 
   @computed("content.length", "site.lazy_load_categories")
   get autoFilterable() {
-    return this.site.lazy_load_categories || this.content.length >= 10;
+    return (
+      this.site.lazy_load_categories ||
+      this.content.length >= FILTER_VISIBILITY_THRESHOLD
+    );
   }
 
   @computed("value", "selectKit.options.{subCategory,noSubcategories}")
diff --git a/frontend/discourse/select-kit/components/combo-box.js b/frontend/discourse/select-kit/components/combo-box.js
@@ -2,7 +2,11 @@ import { gte } from "@ember/object/computed";
 import { classNames } from "@ember-decorators/component";
 import SingleSelectComponent from "discourse/select-kit/components/single-select";
 import ComboBoxHeader from "./combo-box/combo-box-header";
-import { pluginApiIdentifiers, selectKitOptions } from "./select-kit";
+import {
+  FILTER_VISIBILITY_THRESHOLD,
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "./select-kit";
 
 @classNames("combobox", "combo-box")
 @pluginApiIdentifiers(["combo-box"])
@@ -15,5 +19,5 @@ import { pluginApiIdentifiers, selectKitOptions } from "./select-kit";
   shouldDisplayIcon: false,
 })
 export default class ComboBox extends SingleSelectComponent {
-  @gte("content.length", 10) autoFilterable;
+  @gte("content.length", FILTER_VISIBILITY_THRESHOLD) autoFilterable;
 }
diff --git a/frontend/discourse/select-kit/components/select-kit.js b/frontend/discourse/select-kit/components/select-kit.js
@@ -36,6 +36,7 @@ import SelectedName from "./selected-name";
 
 export const MAIN_COLLECTION = "MAIN_COLLECTION";
 export const ERRORS_COLLECTION = "ERRORS_COLLECTION";
+export const FILTER_VISIBILITY_THRESHOLD = 10;
 
 function isDocumentRTL() {
   return document.documentElement.classList.contains("rtl");
@@ -400,7 +401,7 @@ export default class SelectKit extends Component {
     return (
       this.selectKit.filter &&
       this.options.autoFilterable &&
-      this.content.length > 15
+      this.content.length >= FILTER_VISIBILITY_THRESHOLD
     );
   }
 
diff --git a/spec/system/page_objects/components/select_kit.rb b/spec/system/page_objects/components/select_kit.rb
@@ -18,7 +18,7 @@ def component
       end
 
       def visible?
-        has_css?(@context)
+        has_css?(@context, visible: true)
       end
 
       def hidden?
@@ -35,7 +35,7 @@ def collapsed_component
       end
 
       def expanded?
-        component.has_css?(".select-kit-body", visible: :visible)
+        component.has_css?(".select-kit-body", visible: true)
       end
 
       def is_collapsed?
diff --git a/spec/system/page_objects/components/welcome_banner.rb b/spec/system/page_objects/components/welcome_banner.rb
@@ -63,28 +63,24 @@ def has_bg_img?(url)
         has_css?(
           ".welcome-banner.--with-bg-img .custom-search-banner-wrap.welcome-banner__wrap",
           style: "background-image:url(#{url});",
-          visible: :visible,
+          visible: true,
         )
       end
 
       def has_custom_text_color?(color)
-        has_css?(
-          ".welcome-banner .welcome-banner__title",
-          style: "color:#{color};",
-          visible: :visible,
-        )
+        has_css?(".welcome-banner .welcome-banner__title", style: "color:#{color};", visible: true)
       end
 
       def has_no_custom_text_color?(color)
         has_no_css?(".welcome-banner .welcome-banner__title", style: "color:#{color};")
       end
 
       def above_topic_content?
-        has_css?("#main-outlet > .--location-above-topic-content", visible: :visible)
+        has_css?("#main-outlet > .--location-above-topic-content", visible: true)
       end
 
       def below_site_header?
-        has_css?(".discourse-root > .--location-below-site-header", visible: :visible)
+        has_css?(".discourse-root > .--location-below-site-header", visible: true)
       end
     end
   end
