Add igxDropDown maxHeight input (#3005)

* feat(igxDropDown): introduce itemsMaxHeight property #3001 * test(igxDropDown): test for max height #3001 * docs(igxDropDown): changelog update #3001 * test(igxCombo): adjust tests according to new dropdown structure #3001 * test(igxDropDown): add more tests #3001
IgniteUI · Nov 14, 2018 · e2329e6 · e2329e6
1 parent 3597d0d
commit e2329e6
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 6.2.1
+- `igx-drop-down`:
+    - Added a new property `maxHeight`, defining the max height of the drop down.
+
 ## 6.2.0
 - Updated typography following the Material guidelines. Type system is now also optional and can be applied via class to the desired containers. [#2112](https://github.com/IgniteUI/igniteui-angular/pull/2112)
   - **Breaking change:** Applications using Ignite UI for Angular now require the `igx-typography` class to be applied on wrapping element, like the body element for instance.

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -1583,13 +1583,10 @@ describe('igxCombo', () => {
             expect(inputGroupBorder.classList.contains(CSS_CLASS_INPUTGROUP_BORDER)).toBeTruthy();
             expect(inputGroupBorder.childElementCount).toEqual(0);
 
-            const dropDownWrapper = comboElement.children[1];
-            expect(dropDownWrapper.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy();
-            expect(dropDownWrapper.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(defaultComboDDWidth);
-            expect(dropDownWrapper.childElementCount).toEqual(1);
-
-            const dropDownElement = dropDownWrapper.children[0];
+            const dropDownElement = comboElement.children[1];
+            expect(dropDownElement.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy();
             expect(dropDownElement.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy();
+            expect(dropDownElement.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(defaultComboDDWidth);
             expect(dropDownElement.childElementCount).toEqual(1);
 
             const dropDownList = dropDownElement.children[0];

diff --git a/projects/igniteui-angular/src/lib/drop-down/README.md b/projects/igniteui-angular/src/lib/drop-down/README.md
@@ -36,6 +36,7 @@ The following inputs are available in the **igx-drop-down** component:
 | :--- | :--- | :--- |
 | `width` | string | Sets the tab width of the control. |
 | `height` | string | Sets the tab height of the control. |
+| `maxHeight` | string | defines drop down maximum height |
 | `allowItemsFocus` | boolean | Allows items to take focus. |
 | `id` | string | Sets the drop down's id. |
 

diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html
@@ -1,7 +1,7 @@
-<div class="igx-drop-down">
-    <div class="igx-drop-down__list" igxToggle (onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()" (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
-        <ng-container *ngIf="!collapsed">
-            <ng-content></ng-content>
-        </ng-container>
-    </div>
-</div>
+<div class="igx-drop-down__list" igxToggle [style.maxHeight]="maxHeight"
+    (onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()"
+    (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
+    <ng-container *ngIf="!collapsed">
+        <ng-content></ng-content>
+    </ng-container>
+</div>
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
@@ -35,7 +35,9 @@ describe('IgxDropDown ', () => {
                 IgxDropDownImageTestComponent,
                 IgxDropDownTabsTestComponent,
                 DropDownWithValuesComponent,
-                IgxDropDownSelectComponent
+                IgxDropDownSelectComponent,
+                DropDownWithMaxHeightComponent,
+                DropDownWithUnusedMaxHeightComponent
             ],
             imports: [
                 IgxDropDownModule,
@@ -73,7 +75,7 @@ describe('IgxDropDown ', () => {
             expect(currentItem.componentInstance.index).toEqual(0);
             expect(list.collapsed).toEqual(false);
 
-            targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent;
+            targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0];
             expect(targetElement).toBeDefined();
 
             mockObj.code = 'arrowdown';
@@ -97,15 +99,15 @@ describe('IgxDropDown ', () => {
             button.click(mockObj);
             tick();
             fixture.detectChanges();
-            targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent;
+            targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0];
             currentItem = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED))[0];
 
             mockObj.code = 'arrowdown';
             mockObj.key = 'arrowdown';
             targetElement.triggerEventHandler('keydown', mockObj);
             tick();
             fixture.detectChanges();
-            targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent;
+            targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0];
             currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED));
 
             mockObj.code = 'enter';
@@ -152,7 +154,7 @@ describe('IgxDropDown ', () => {
             let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED));
             expect(currentItem.componentInstance.index).toEqual(0);
 
-            targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent;
+            targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE));
             mockObj.code = 'arrowdown';
             mockObj.key = 'arrowdown';
             targetElement.triggerEventHandler('keydown', mockObj);
@@ -209,7 +211,7 @@ describe('IgxDropDown ', () => {
             tick();
             fixture.detectChanges();
             let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED));
-            targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent;
+            targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE));
             mockObj.code = 'ArrowDown';
             mockObj.key = 'ArrowDown';
             targetElement.triggerEventHandler('keydown', mockObj);
@@ -544,7 +546,7 @@ describe('IgxDropDown ', () => {
             fixture.detectChanges();
             let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED));
             expect(currentItem).toBeDefined();
-            targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent;
+            targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE));
             targetElement.triggerEventHandler('keydown', mockObj);
             tick();
 
@@ -884,6 +886,32 @@ describe('IgxDropDown ', () => {
             expect(dropdown.selectedItem).toEqual(dropdownItem);
             expect(dropdown.collapsed).toEqual(true);
         }));
+
+        it('Should properly set maxHeight option', fakeAsync(() => {
+            const fixture = TestBed.createComponent(DropDownWithMaxHeightComponent);
+            fixture.detectChanges();
+            const dropdown = fixture.componentInstance.dropdown;
+            dropdown.toggle();
+            tick();
+
+            fixture.detectChanges();
+            const ddList = fixture.debugElement.query(By.css('.igx-drop-down__list')).nativeElement;
+            expect(parseInt(ddList.style.maxHeight, 10)).toEqual(ddList.offsetHeight);
+            expect(ddList.style.maxHeight).toBe('100px');
+        }));
+
+        it('Should properly set maxHeight option (maxHeight value larger than needed)', fakeAsync(() => {
+            const fixture = TestBed.createComponent(DropDownWithUnusedMaxHeightComponent);
+            fixture.detectChanges();
+            const dropdown = fixture.componentInstance.dropdown;
+            dropdown.toggle();
+            tick();
+
+            fixture.detectChanges();
+            const ddList = fixture.debugElement.query(By.css('.igx-drop-down__list')).nativeElement;
+            expect(parseInt(ddList.style.maxHeight, 10)).toBeGreaterThan(ddList.offsetHeight);
+            expect(ddList.style.maxHeight).toBe('700px');
+        }));
     });
 
     describe('igxDropDown Unit tests', () => {
@@ -1674,3 +1702,23 @@ class DropDownWithValuesComponent {
         { name: 'Product 4', id: 3 },
     ];
 }
+
+@Component({
+    template: `
+    <igx-drop-down #dropdownElement [maxHeight]="'100px'">
+        <igx-drop-down-item *ngFor="let item of items" [value]="item">
+            {{ item.field }}
+        </igx-drop-down-item>
+    </igx-drop-down>`
+})
+class DropDownWithMaxHeightComponent extends DropDownWithValuesComponent {}
+
+@Component({
+    template: `
+    <igx-drop-down #dropdownElement [maxHeight]="'700px'">
+        <igx-drop-down-item *ngFor="let item of items" [value]="item">
+            {{ item.field }}
+        </igx-drop-down-item>
+    </igx-drop-down>`
+})
+class DropDownWithUnusedMaxHeightComponent extends DropDownWithValuesComponent {}
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
@@ -16,7 +16,8 @@ import {
     Optional,
     HostListener,
     Directive,
-    Inject
+    Inject,
+    HostBinding
 } from '@angular/core';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle.directive';
@@ -205,6 +206,25 @@ export class IgxDropDownBase implements OnInit, IToggleView {
         this.toggleDirective.id = value;
     }
 
+    @HostBinding('class.igx-drop-down')
+    cssClass = 'igx-drop-down';
+
+    /**
+     * Gets/Sets the drop down's container max height.
+     *
+     * ```typescript
+     * // get
+     * let maxHeight = this.dropdown.maxHeight;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-drop-down [maxHeight]='200px'></igx-drop-down>
+     * ```
+     */
+    @Input()
+    public maxHeight = null;
+
     /**
      * Gets if the dropdown is collapsed
      *