From 3ca56d0716b97d7894be423ff89e0dedd933f07c Mon Sep 17 00:00:00 2001
From: LightOfHeaven1994 <eshamard@redhat.com>
Date: Thu, 6 Aug 2026 17:01:00 +0200
Subject: [PATCH 1/2] fix(CheckboxFilter): show 'Show more' option properly

---
 .../useFilterConfig/helpers/filterTypeHelpers/checkboxType.js   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js
index b2bd66d..2216058 100644
--- a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js
+++ b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js
@@ -10,6 +10,8 @@ const checkboxType = {
               // TODO The checkbox filter in frontend-components does not really support "Show more", like the group filter.
               label: 'Show more',
               value: 'modal',
+              hasCheckbox: false,
+              isLoadButton: true,
               onClick: () => openFilterModal?.(stringToId(label)),
             },
           ]

From 5bd095f86c27c0b381b8af72125ee9cc6432fa3b Mon Sep 17 00:00:00 2001
From: LightOfHeaven1994 <eshamard@redhat.com>
Date: Thu, 6 Aug 2026 17:14:37 +0200
Subject: [PATCH 2/2] fix(CheckboxFilter): limit number of items when modal
 enabled

---
 .../helpers/filterTypeHelpers/checkboxType.js | 48 +++++++++++--------
 .../filterTypeHelpers/checkboxType.test.js    | 34 ++++++++++++-
 2 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js
index 2216058..cb70197 100644
--- a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js
+++ b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js
@@ -1,25 +1,35 @@
 import { configItemItemByLabel, defaultOnChange, stringToId } from '../helpers';
 
+export const DEFAULT_MODAL_VISIBLE_ITEM_COUNT = 10;
+
+const getVisibleItemCount = (modal) =>
+  modal?.visibleItemCount ?? DEFAULT_MODAL_VISIBLE_ITEM_COUNT;
+
 const checkboxType = {
-  filterValues: ({ items, label, modal }, handler, value, openFilterModal) => ({
-    items: [
-      ...items,
-      ...(modal
-        ? [
-            {
-              // TODO The checkbox filter in frontend-components does not really support "Show more", like the group filter.
-              label: 'Show more',
-              value: 'modal',
-              hasCheckbox: false,
-              isLoadButton: true,
-              onClick: () => openFilterModal?.(stringToId(label)),
-            },
-          ]
-        : []),
-    ],
-    value,
-    ...defaultOnChange(handler, stringToId(label)),
-  }),
+  filterValues: ({ items, label, modal }, handler, value, openFilterModal) => {
+    const dropdownItems = modal
+      ? items.slice(0, getVisibleItemCount(modal))
+      : items;
+
+    return {
+      items: [
+        ...dropdownItems,
+        ...(modal
+          ? [
+              {
+                label: 'Show more',
+                value: 'modal',
+                hasCheckbox: false,
+                isLoadButton: true,
+                onClick: () => openFilterModal?.(stringToId(label)),
+              },
+            ]
+          : []),
+      ],
+      value,
+      ...defaultOnChange(handler, stringToId(label)),
+    };
+  },
   filterChips: (configItem, value) => ({
     category: configItem.label,
     chips: value.map((chipValue) => {
diff --git a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js
index 0134bff..f789bfc 100644
--- a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js
+++ b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js
@@ -1,9 +1,9 @@
 import { faker } from '@faker-js/faker';
 
-import { genre } from '~/support/factories/filters';
+import { genre, genreWithModal } from '~/support/factories/filters';
 import { genres } from '~/support/factories/items';
 
-import checkboxType from './checkboxType';
+import checkboxType, { DEFAULT_MODAL_VISIBLE_ITEM_COUNT } from './checkboxType';
 import { stringToId } from '../helpers';
 
 describe('checkboxType', () => {
@@ -18,6 +18,36 @@ describe('checkboxType', () => {
         }),
       );
     });
+
+    it('should limit dropdown items when modal is enabled', () => {
+      const { items } = checkboxType.filterValues(
+        genreWithModal,
+        () => {},
+        [],
+        jest.fn(),
+      );
+
+      expect(items).toHaveLength(DEFAULT_MODAL_VISIBLE_ITEM_COUNT + 1);
+      expect(items.slice(0, -1)).toEqual(
+        genreWithModal.items.slice(0, DEFAULT_MODAL_VISIBLE_ITEM_COUNT),
+      );
+      expect(items[items.length - 1].label).toBe('Show more');
+    });
+
+    it('should allow overriding the visible item count via modal.visibleItemCount', () => {
+      const visibleItemCount = 3;
+      const { items } = checkboxType.filterValues(
+        { ...genreWithModal, modal: { visibleItemCount } },
+        () => {},
+        [],
+        jest.fn(),
+      );
+
+      expect(items).toHaveLength(visibleItemCount + 1);
+      expect(items.slice(0, -1)).toEqual(
+        genreWithModal.items.slice(0, visibleItemCount),
+      );
+    });
   });
 
   describe('filterChips', () => {