From b53d2f3a9ae036db90ba742226bf62e1d2be98ed Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 21 Aug 2025 08:53:26 +0300 Subject: [PATCH 1/9] feat(combo): fix initial combo height --- .../src/lib/core/styles/components/combo/_combo-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 6b0f7cf4657..28b8b696faf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -100,7 +100,7 @@ %igx-combo__content { position: relative; overflow: hidden; - max-height: calc(var(--size) * 10); + max-height: calc(var(--size) * 6); &:focus { outline: transparent; From 78832cabba22320259598562f24a714bfd55da54 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 21 Aug 2025 11:26:00 +0300 Subject: [PATCH 2/9] test(combo): try fixing tests --- .../src/lib/combo/combo.component.spec.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 470de677279..ac572587a6c 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -56,7 +56,7 @@ const CSS_CLASS_EMPTY = 'igx-combo__empty'; const CSS_CLASS_ITEM_CHECKBOX = 'igx-combo__checkbox'; const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked'; const defaultDropdownItemHeight = 40; -const defaultDropdownItemMaxHeight = 400; +const defaultDropdownItemMaxHeight = 240; describe('igxCombo', () => { let fixture: ComponentFixture; @@ -1772,7 +1772,7 @@ describe('igxCombo', () => { dropdown.toggle(); fixture.detectChanges(); expect(dropdown.items).toBeDefined(); - expect(dropdown.items.length).toEqual(9); + expect(dropdown.items.length).toEqual(5); dropdown.onFocus(); expect(dropdown.focusedItem).toEqual(dropdown.items[0]); expect(dropdown.focusedItem.focused).toEqual(true); @@ -2691,19 +2691,19 @@ describe('igxCombo', () => { combo.toggle(); fixture.detectChanges(); let headers = combo.dropdown.headers.map(header => header.element.nativeElement.innerText); - expect(headers).toEqual(['Ángel', 'Boris', 'México', 'Méxícó']); + expect(headers).toEqual(['Ángel', 'Boris', 'México']); combo.groupSortingDirection = SortingDirection.Desc; combo.toggle(); fixture.detectChanges(); headers = combo.dropdown.headers.map(header => header.element.nativeElement.innerText); - expect(headers).toEqual(['Méxícó', 'México', 'Boris', 'Ángel']); + expect(headers).toEqual(['Méxícó', 'México', 'Boris']); combo.groupSortingDirection = SortingDirection.None; combo.toggle(); fixture.detectChanges(); headers = combo.dropdown.headers.map(header => header.element.nativeElement.innerText); - expect(headers).toEqual(['Méxícó', 'Ángel', 'México', 'Boris']); + expect(headers).toEqual(['Méxícó', 'Ángel', 'México']); }); }); describe('Filtering tests: ', () => { @@ -2862,8 +2862,8 @@ describe('igxCombo', () => { verifyFilteredItems('jose', 1); verifyFilteredItems('mexico', 3); - verifyFilteredItems('o', 7); - verifyFilteredItems('é', 7); + verifyFilteredItems('o', 6); + verifyFilteredItems('é', 6); })); it('should filter the dropdown items when typing in the search input', fakeAsync(() => { @@ -2888,9 +2888,9 @@ describe('igxCombo', () => { dropdownItems = dropdownList.querySelectorAll(`.${CSS_CLASS_DROPDOWNLISTITEM}`); expect(dropdownItems.length).toEqual(expectedItemsNumber); }; - verifyFilteredItems('M', 7); + verifyFilteredItems('M', 4); - verifyFilteredItems('Mi', 5); + verifyFilteredItems('Mi', 3); expectedValues = expectedValues.filter(data => data.field.toLowerCase().includes('mi')); checkFilteredItems(dropdownItems); @@ -2960,9 +2960,9 @@ describe('igxCombo', () => { expect(combo.filteredData.length).toEqual(expectedFilteredItemsNumber); }; - verifyFilteredItems('M', 7, 15); - verifyFilteredItems('Mi', 5, 5); - verifyFilteredItems('M', 7, 15); + verifyFilteredItems('M', 4, 15); + verifyFilteredItems('Mi', 3, 5); + verifyFilteredItems('M', 4, 15); combo.filteredData.forEach((item) => expect(combo.data).toContain(item)); }); it('should clear the search input and close the dropdown list on pressing ESC key', fakeAsync(() => { From 87bb91f07a7294900a641dc5e01a55458baf6915 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 21 Aug 2025 11:59:07 +0300 Subject: [PATCH 3/9] test(simple-combo): fix simple combo default max height --- .../src/lib/simple-combo/simple-combo.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index 24d751b251e..50c793300ba 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -39,7 +39,7 @@ const CSS_CLASS_FOOTER = 'footer-class'; const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required'; const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid'; const defaultDropdownItemHeight = 40; -const defaultDropdownItemMaxHeight = 400; +const defaultDropdownItemMaxHeight = 240; describe('IgxSimpleCombo', () => { let fixture: ComponentFixture; From b17b32740d6ea558645ad3407d5e4a89f2456300 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 22 Aug 2025 12:48:25 +0300 Subject: [PATCH 4/9] test(combo): fix more tests --- .../src/lib/combo/combo.component.spec.ts | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index ac572587a6c..5345bc34424 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -1195,17 +1195,18 @@ describe('igxCombo', () => { it('should render selected items properly', () => { combo.toggle(); fixture.detectChanges(); + const dropdownList = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWNLIST_SCROLL}`)).nativeElement; const dropdownItems = dropdownList.querySelectorAll(`.${CSS_CLASS_DROPDOWNLISTITEM}`); + + expect(dropdownItems[1].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy(); expect(dropdownItems[3].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy(); - expect(dropdownItems[7].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy(); - combo.select(['Illinois', 'Mississippi', 'Ohio']); + combo.select(['Illinois', 'Ohio']); fixture.detectChanges(); expect(dropdownItems[1].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy(); expect(dropdownItems[3].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy(); - expect(dropdownItems[7].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy(); combo.deselect(['Ohio']); fixture.detectChanges(); @@ -1225,9 +1226,9 @@ describe('igxCombo', () => { expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); // Change focus - dropdown.navigateItem(6); + dropdown.navigateItem(4); fixture.detectChanges(); - const focusedItem_2 = dropdownItems[5]; + const focusedItem_2 = dropdownItems[3]; expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy(); }); @@ -1894,17 +1895,17 @@ describe('igxCombo', () => { selectedItemsCount++; selectAndVerifyItem(0); - for (let index = 1; index < 7; index++) { + for (let index = 1; index < 5; index++) { focusAndVerifyItem(index, 'ArrowDown'); } selectedItemsCount++; - selectAndVerifyItem(6); + selectAndVerifyItem(4); - for (let index = 5; index > 3; index--) { + for (let index = 3; index >= 2; index--) { focusAndVerifyItem(index, 'ArrowUp'); } selectedItemsCount++; - selectAndVerifyItem(4); + selectAndVerifyItem(2); }); it('should properly navigate using HOME/END key', (async () => { let firstVisibleItem: Element; @@ -2072,7 +2073,7 @@ describe('igxCombo', () => { const scrollbar = fixture.debugElement.query(By.css(`.${CSS_CLASS_SCROLLBAR_VERTICAL}`)).nativeElement as HTMLElement; expect(scrollbar.scrollTop).toEqual(0); - combo.virtualScrollContainer.scrollTo(16); + combo.virtualScrollContainer.scrollTo(12); await firstValueFrom(combo.virtualScrollContainer.chunkLoad); fixture.detectChanges(); let selectedItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[1]; @@ -2088,7 +2089,7 @@ describe('igxCombo', () => { // Content was scrolled to bottom expect(scrollbar.scrollHeight - scrollbar.scrollTop).toEqual(scrollbar.clientHeight); - combo.virtualScrollContainer.scrollTo(5); + combo.virtualScrollContainer.scrollTo(4); await firstValueFrom(combo.virtualScrollContainer.chunkLoad); fixture.detectChanges(); selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); @@ -2163,15 +2164,14 @@ describe('igxCombo', () => { expect(input.nativeElement.value).toEqual(expectedOutput); }); it('should dismiss all selected items by pressing clear button', () => { - const expectedOutput = 'Kentucky, Ohio, Indiana'; - combo.select(['Kentucky', 'Ohio', 'Indiana']); + const expectedOutput = 'Ohio, Indiana'; + combo.select(['Ohio', 'Indiana']); fixture.detectChanges(); expect(input.nativeElement.value).toEqual(expectedOutput); combo.toggle(); fixture.detectChanges(); expect(combo.dropdown.items[1].selected).toBeTruthy(); expect(combo.dropdown.items[4].selected).toBeTruthy(); - expect(combo.dropdown.items[6].selected).toBeTruthy(); const clearBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`)); clearBtn.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); @@ -2184,7 +2184,6 @@ describe('igxCombo', () => { fixture.detectChanges(); expect(combo.dropdown.items[1].selected).toBeFalsy(); expect(combo.dropdown.items[4].selected).toBeFalsy(); - expect(combo.dropdown.items[6].selected).toBeFalsy(); }); it('should show/hide clear button after selecting/deselecting items', () => { // This is a workaround for issue github.com/angular/angular/issues/14235 @@ -2242,8 +2241,8 @@ describe('igxCombo', () => { cancel: false }); - const selectedItem_2 = dropdown.items[5]; - simulateComboItemClick(5); + const selectedItem_2 = dropdown.items[4]; + simulateComboItemClick(4); expect(combo.selection[1]).toEqual(selectedItem_2.value); expect(combo.value[1]).toEqual(selectedItem_2.value[combo.valueKey]); expect(selectedItem_2.selected).toBeTruthy(); @@ -3768,7 +3767,6 @@ class IgxComboFormComponent { password: ['', Validators.required], townCombo: [[this.items[0]], Validators.required] }); - } public onSubmitReactive() { } From 13c8c5271e88540e02d0a2129ec107b3ef93f2fa Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 22 Aug 2025 13:00:40 +0300 Subject: [PATCH 5/9] test(simple-combo): fix simple combo test --- .../src/lib/simple-combo/simple-combo.component.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index 50c793300ba..a85dc638e01 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -41,7 +41,7 @@ const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid'; const defaultDropdownItemHeight = 40; const defaultDropdownItemMaxHeight = 240; -describe('IgxSimpleCombo', () => { +fdescribe('IgxSimpleCombo', () => { let fixture: ComponentFixture; let combo: IgxSimpleComboComponent; let input: DebugElement; @@ -718,9 +718,9 @@ describe('IgxSimpleCombo', () => { expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); // Change focus - dropdown.navigateItem(6); + dropdown.navigateItem(5); fixture.detectChanges(); - const focusedItem_2 = dropdownItems[5]; + const focusedItem_2 = dropdownItems[4]; expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy(); }); From d68b49cfa65ff89cadfc046e2241c12132844a71 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 22 Aug 2025 13:51:16 +0300 Subject: [PATCH 6/9] chore(test): remove fdescribe --- .../src/lib/simple-combo/simple-combo.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index a85dc638e01..14b1f8ee211 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -41,7 +41,7 @@ const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid'; const defaultDropdownItemHeight = 40; const defaultDropdownItemMaxHeight = 240; -fdescribe('IgxSimpleCombo', () => { +describe('IgxSimpleCombo', () => { let fixture: ComponentFixture; let combo: IgxSimpleComboComponent; let input: DebugElement; From a5cae963d76ce1fc451f7c3cb3d02ad83f572a26 Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 25 Aug 2025 10:01:42 +0300 Subject: [PATCH 7/9] feat(combo): fix indigo dropdown initial height --- .../src/lib/core/styles/components/combo/_combo-theme.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 99b54ee8b56..a42d0ccb4c8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -102,6 +102,10 @@ overflow: hidden; max-height: calc(var(--size) * 6); + @if $variant == 'indigo' { + max-height: calc(var(--size) * 6 + rem(10px)); + } + &:focus { outline: transparent; } From 4f902da816ff3d22ef21f6b6b2f2c9feec326641 Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 25 Aug 2025 12:18:52 +0300 Subject: [PATCH 8/9] feat(combo): fix indigo initial combo height --- .../src/lib/core/styles/components/combo/_combo-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index a42d0ccb4c8..bb9133432ab 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -103,7 +103,7 @@ max-height: calc(var(--size) * 6); @if $variant == 'indigo' { - max-height: calc(var(--size) * 6 + rem(10px)); + max-height: calc(var(--size) * 6 + rem(16px)); } &:focus { From ad179c921a2e7a056b26a5ef108773e1282c1238 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 2 Sep 2025 09:56:59 +0300 Subject: [PATCH 9/9] refactor(combo): use CSS variable to set item count --- .../src/lib/core/styles/components/combo/_combo-theme.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index bb9133432ab..5cbf0d8c1d6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -98,12 +98,14 @@ } %igx-combo__content { + --item-count: 6; + position: relative; overflow: hidden; - max-height: calc(var(--size) * 6); + max-height: calc(var(--size) * var(--item-count)); @if $variant == 'indigo' { - max-height: calc(var(--size) * 6 + rem(16px)); + max-height: calc(var(--size) * var(--item-count) + rem(16px)); } &:focus {