fix: Listbox: Preserve option groups while filtering.

chore: Add unit tests fixes primefaces#6233
avramz · Aug 22, 2024 · 0656308 · 0656308
1 parent 90132fc
commit 0656308
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 1 deletion.
diff --git a/packages/primevue/src/listbox/Listbox.spec.js b/packages/primevue/src/listbox/Listbox.spec.js
@@ -47,5 +47,70 @@ describe('Listbox.vue', () => {
 
             expect(icon.classes()).toContain('pi-discord');
         });
+
+        it('should correctly filter', async () => {
+            await wrapper.setProps({
+                filter: true
+            });
+
+            const filterInput = wrapper.find('input.p-listbox-filter');
+
+            expect(filterInput.exists()).toBe(true);
+
+            await filterInput.setValue('is');
+
+            const options = wrapper.findAll('.p-listbox-option');
+
+            expect(options.length).toBe(2);
+            expect(options[0].text()).toBe('Istanbul');
+        });
+
+        it('should correctly filter groups', async () => {
+            await wrapper.setProps({
+                filter: true,
+                optionGroupLabel: 'label',
+                optionLabel: 'label',
+                optionGroupChildren: 'items',
+                options: [
+                    {
+                        label: 'Germany',
+                        code: 'DE',
+                        items: [
+                            { label: 'Berlin', value: 'Berlin' },
+                            { label: 'Frankfurt', value: 'Frankfurt' },
+                            { label: 'Hamburg', value: 'Hamburg' },
+                            { label: 'Munich', value: 'Munich' }
+                        ]
+                    },
+                    {
+                        label: 'USA',
+                        code: 'US',
+                        items: [
+                            { label: 'Chicago', value: 'Chicago' },
+                            { label: 'Los Angeles', value: 'Los Angeles' },
+                            { label: 'New York', value: 'New York' },
+                            { label: 'San Francisco', value: 'San Francisco' }
+                        ]
+                    }
+                ]
+            });
+
+            const filterInput = wrapper.find('input.p-listbox-filter');
+
+            expect(filterInput.exists()).toBe(true);
+
+            await filterInput.setValue('ch');
+
+            const optionGroups = wrapper.findAll('.p-listbox-option-group');
+            const options = wrapper.findAll('.p-listbox-option');
+
+            expect(optionGroups.length).toBe(2);
+            expect(optionGroups[0].text()).toBe('Germany');
+            expect(optionGroups[1].text()).toBe('USA');
+
+            expect(options.length).toBe(2);
+            expect(options[0].text()).toBe('Munich');
+            expect(options[1].text()).toBe('Chicago');
+        });
     });
 });
diff --git a/packages/primevue/src/listbox/Listbox.vue b/packages/primevue/src/listbox/Listbox.vue
@@ -726,7 +726,27 @@ export default {
         visibleOptions() {
             const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
-            return this.filterValue ? FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options;
+            if (this.filterValue) {
+                const filteredOptions = FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
+
+                if (this.optionGroupLabel) {
+                    const optionGroups = this.options || [];
+                    const filtered = [];
+
+                    optionGroups.forEach((group) => {
+                        const groupChildren = this.getOptionGroupChildren(group);
+                        const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));
+
+                        if (filteredItems.length > 0) filtered.push({ ...group, [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems] });
+                    });
+
+                    return this.flatOptions(filtered);
+                }
+
+                return filteredOptions;
+            }
+
+            return options;
         },
         hasSelectedOption() {
             return isNotEmpty(this.modelValue);