Skip to content

Commit 710b3ee

Browse files
didimmovasimeonoff
didimmova
and
simeonoff
authored
feat(combo): fix combo initial dropdown height (#16171)
* feat(combo): fix combo initial dropdown height * refactor(themes): update dropdown theme to use a CSS variable for item count --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 6141c64 commit 710b3ee

File tree

4 files changed

+36
-35
lines changed

4 files changed

+36
-35
lines changed

‎projects/igniteui-angular/src/lib/combo/combo.component.spec.ts‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const CSS_CLASS_EMPTY = 'igx-combo__empty';
5656
const CSS_CLASS_ITEM_CHECKBOX = 'igx-combo__checkbox';
5757
const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked';
5858
const defaultDropdownItemHeight = 40;
59-
const defaultDropdownItemMaxHeight = 400;
59+
const defaultDropdownItemMaxHeight = 240;
6060

6161
describe('igxCombo', () => {
6262
let fixture: ComponentFixture<any>;
@@ -1211,13 +1211,11 @@ describe('igxCombo', () => {
12111211
const dropdownItems = dropdownList.querySelectorAll(`.${CSS_CLASS_DROPDOWNLISTITEM}`);
12121212
expect(dropdownItems[1].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
12131213
expect(dropdownItems[3].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
1214-
expect(dropdownItems[7].classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
12151214

1216-
combo.select(['Illinois', 'Mississippi', 'Ohio']);
1215+
combo.select(['Illinois', 'Ohio']);
12171216
fixture.detectChanges();
12181217
expect(dropdownItems[1].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
12191218
expect(dropdownItems[3].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
1220-
expect(dropdownItems[7].classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
12211219

12221220
combo.deselect(['Ohio']);
12231221
fixture.detectChanges();
@@ -1237,9 +1235,9 @@ describe('igxCombo', () => {
12371235
expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
12381236

12391237
// Change focus
1240-
dropdown.navigateItem(6);
1238+
dropdown.navigateItem(4);
12411239
fixture.detectChanges();
1242-
const focusedItem_2 = dropdownItems[5];
1240+
const focusedItem_2 = dropdownItems[3];
12431241
expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
12441242
expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy();
12451243
});
@@ -1803,7 +1801,7 @@ describe('igxCombo', () => {
18031801
dropdown.toggle();
18041802
fixture.detectChanges();
18051803
expect(dropdown.items).toBeDefined();
1806-
expect(dropdown.items.length).toEqual(9);
1804+
expect(dropdown.items.length).toEqual(5);
18071805
dropdown.onFocus();
18081806
expect(dropdown.focusedItem).toEqual(dropdown.items[0]);
18091807
expect(dropdown.focusedItem.focused).toEqual(true);
@@ -1925,17 +1923,17 @@ describe('igxCombo', () => {
19251923
selectedItemsCount++;
19261924
selectAndVerifyItem(0);
19271925

1928-
for (let index = 1; index < 7; index++) {
1926+
for (let index = 1; index < 5; index++) {
19291927
focusAndVerifyItem(index, 'ArrowDown');
19301928
}
19311929
selectedItemsCount++;
1932-
selectAndVerifyItem(6);
1930+
selectAndVerifyItem(4);
19331931

1934-
for (let index = 5; index > 3; index--) {
1932+
for (let index = 3; index >= 2; index--) {
19351933
focusAndVerifyItem(index, 'ArrowUp');
19361934
}
19371935
selectedItemsCount++;
1938-
selectAndVerifyItem(4);
1936+
selectAndVerifyItem(2);
19391937
});
19401938
it('should properly navigate using HOME/END key', (async () => {
19411939
let firstVisibleItem: Element;
@@ -2093,7 +2091,7 @@ describe('igxCombo', () => {
20932091
const scrollbar = fixture.debugElement.query(By.css(`.${CSS_CLASS_SCROLLBAR_VERTICAL}`)).nativeElement as HTMLElement;
20942092
expect(scrollbar.scrollTop).toEqual(0);
20952093

2096-
combo.virtualScrollContainer.scrollTo(16);
2094+
combo.virtualScrollContainer.scrollTo(12);
20972095
await firstValueFrom(combo.virtualScrollContainer.chunkLoad);
20982096
fixture.detectChanges();
20992097
let selectedItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[1];
@@ -2109,7 +2107,7 @@ describe('igxCombo', () => {
21092107
// Content was scrolled to bottom
21102108
expect(scrollbar.scrollHeight - scrollbar.scrollTop).toEqual(scrollbar.clientHeight);
21112109

2112-
combo.virtualScrollContainer.scrollTo(5);
2110+
combo.virtualScrollContainer.scrollTo(4);
21132111
await firstValueFrom(combo.virtualScrollContainer.chunkLoad);
21142112
fixture.detectChanges();
21152113
selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`));
@@ -2184,15 +2182,14 @@ describe('igxCombo', () => {
21842182
expect(input.nativeElement.value).toEqual(expectedOutput);
21852183
});
21862184
it('should dismiss all selected items by pressing clear button', () => {
2187-
const expectedOutput = 'Kentucky, Ohio, Indiana';
2188-
combo.select(['Kentucky', 'Ohio', 'Indiana']);
2185+
const expectedOutput = 'Ohio, Indiana';
2186+
combo.select(['Ohio', 'Indiana']);
21892187
fixture.detectChanges();
21902188
expect(input.nativeElement.value).toEqual(expectedOutput);
21912189
combo.toggle();
21922190
fixture.detectChanges();
21932191
expect(combo.dropdown.items[1].selected).toBeTruthy();
21942192
expect(combo.dropdown.items[4].selected).toBeTruthy();
2195-
expect(combo.dropdown.items[6].selected).toBeTruthy();
21962193

21972194
const clearBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
21982195
clearBtn.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
@@ -2205,7 +2202,6 @@ describe('igxCombo', () => {
22052202
fixture.detectChanges();
22062203
expect(combo.dropdown.items[1].selected).toBeFalsy();
22072204
expect(combo.dropdown.items[4].selected).toBeFalsy();
2208-
expect(combo.dropdown.items[6].selected).toBeFalsy();
22092205
});
22102206
it('should show/hide clear button after selecting/deselecting items', () => {
22112207
// This is a workaround for issue github.com/angular/angular/issues/14235
@@ -2263,8 +2259,8 @@ describe('igxCombo', () => {
22632259
cancel: false
22642260
});
22652261

2266-
const selectedItem_2 = dropdown.items[5];
2267-
simulateComboItemClick(5);
2262+
const selectedItem_2 = dropdown.items[4];
2263+
simulateComboItemClick(4);
22682264
expect(combo.selection[1]).toEqual(selectedItem_2.value);
22692265
expect(combo.value[1]).toEqual(selectedItem_2.value[combo.valueKey]);
22702266
expect(selectedItem_2.selected).toBeTruthy();
@@ -2681,19 +2677,19 @@ describe('igxCombo', () => {
26812677
combo.toggle();
26822678
fixture.detectChanges();
26832679
let headers = combo.dropdown.headers.map(header => header.element.nativeElement.textContent?.trim());
2684-
expect(headers).toEqual(['Ángel', 'Boris', 'México', 'Méxícó']);
2680+
expect(headers).toEqual(['Ángel', 'Boris', 'México']);
26852681

26862682
combo.groupSortingDirection = SortingDirection.Desc;
26872683
combo.toggle();
26882684
fixture.detectChanges();
26892685
headers = combo.dropdown.headers.map(header => header.element.nativeElement.textContent?.trim());
2690-
expect(headers).toEqual(['Méxícó', 'México', 'Boris', 'Ángel']);
2686+
expect(headers).toEqual(['Méxícó', 'México', 'Boris']);
26912687

26922688
combo.groupSortingDirection = SortingDirection.None;
26932689
combo.toggle();
26942690
fixture.detectChanges();
26952691
headers = combo.dropdown.headers.map(header => header.element.nativeElement.textContent?.trim());
2696-
expect(headers).toEqual(['Méxícó', 'Ángel', 'México', 'Boris']);
2692+
expect(headers).toEqual(['Méxícó', 'Ángel', 'México']);
26972693
});
26982694
});
26992695
describe('Filtering tests: ', () => {
@@ -2852,8 +2848,8 @@ describe('igxCombo', () => {
28522848

28532849
verifyFilteredItems('jose', 1);
28542850
verifyFilteredItems('mexico', 3);
2855-
verifyFilteredItems('o', 7);
2856-
verifyFilteredItems('é', 7);
2851+
verifyFilteredItems('o', 6);
2852+
verifyFilteredItems('é', 6);
28572853
}));
28582854

28592855
it('should filter the dropdown items when typing in the search input', fakeAsync(() => {
@@ -2878,9 +2874,9 @@ describe('igxCombo', () => {
28782874
dropdownItems = dropdownList.querySelectorAll(`.${CSS_CLASS_DROPDOWNLISTITEM}`);
28792875
expect(dropdownItems.length).toEqual(expectedItemsNumber);
28802876
};
2881-
verifyFilteredItems('M', 7);
2877+
verifyFilteredItems('M', 4);
28822878

2883-
verifyFilteredItems('Mi', 5);
2879+
verifyFilteredItems('Mi', 3);
28842880
expectedValues = expectedValues.filter(data => data.field.toLowerCase().includes('mi'));
28852881
checkFilteredItems(dropdownItems);
28862882

@@ -2950,9 +2946,9 @@ describe('igxCombo', () => {
29502946
expect(combo.filteredData.length).toEqual(expectedFilteredItemsNumber);
29512947
};
29522948

2953-
verifyFilteredItems('M', 7, 15);
2954-
verifyFilteredItems('Mi', 5, 5);
2955-
verifyFilteredItems('M', 7, 15);
2949+
verifyFilteredItems('M', 4, 15);
2950+
verifyFilteredItems('Mi', 3, 5);
2951+
verifyFilteredItems('M', 4, 15);
29562952
combo.filteredData.forEach((item) => expect(combo.data).toContain(item));
29572953
});
29582954
it('should clear the search input and close the dropdown list on pressing ESC key', fakeAsync(() => {

‎projects/igniteui-angular/src/lib/combo/themes/_base.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ $theme: $base;
1111

1212
@include layer(base) {
1313
@include b(igx-drop-down) {
14+
--item-count: 6;
1415
--_search-input-inline-padding: #{pad-inline(rem(4px), rem(8px), rem(16px))};
1516
--_search-input-block-padding: #{pad-block(rem(8px))};
1617

@@ -69,7 +70,7 @@ $theme: $base;
6970

7071
position: relative;
7172
overflow: hidden;
72-
max-height: calc(var(--size) * 10);
73+
max-height: calc(var(--size) * var(--item-count));
7374

7475
&:focus {
7576
outline: transparent;

‎projects/igniteui-angular/src/lib/combo/themes/shared/indigo.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,8 @@ $_theme: $indigo;
1515
--ig-size: 2;
1616
}
1717
}
18+
19+
@include e(content) {
20+
max-height: calc(var(--size) * var(--item-count) + rem(16px));
21+
}
1822
}

‎projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -699,8 +699,8 @@ describe('IgxSimpleCombo', () => {
699699
it('should render dropdown list and item height defaults properly', fakeAsync(() => {
700700
let itemHeight = 40;
701701

702-
// Initially there are 11 items inside the combo that's why it should be 440
703-
let dropdownHeight = 440;
702+
// Initially there are 6 items inside the combo that's why it should be 240
703+
let dropdownHeight = 240;
704704

705705
// NOTE: item height is 40px for a large variant
706706
fixture.componentInstance.size = "large";
@@ -721,7 +721,7 @@ describe('IgxSimpleCombo', () => {
721721
verifyDropdownItemHeight();
722722

723723
itemHeight = 48;
724-
dropdownHeight = 480;
724+
dropdownHeight = 288;
725725
combo.itemHeight = itemHeight;
726726
tick();
727727
fixture.detectChanges();
@@ -760,9 +760,9 @@ describe('IgxSimpleCombo', () => {
760760
expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
761761

762762
// Change focus
763-
dropdown.navigateItem(6);
763+
dropdown.navigateItem(5);
764764
fixture.detectChanges();
765-
const focusedItem_2 = dropdownItems[5];
765+
const focusedItem_2 = dropdownItems[4];
766766
expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
767767
expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy();
768768
});

0 commit comments

Comments
 (0)