Skip to content

Commit

Permalink
Merge branch 'master' into nalipiev/autocomplete-sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lipata
Lipata authored Mar 1, 2019
2 parents 90c5e81 + fe3a0e5 commit 6ca70bb
Show file tree
Hide file tree
Showing 8 changed files with 251 additions and 50 deletions.
59 changes: 43 additions & 16 deletions projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,24 +132,24 @@ describe('IgxAutocomplete', () => {
expect(dropDown.collapsed).toBeTruthy();
}));
it('Should close the dropdown when disabled dynamically', fakeAsync(() => {
spyOn(autocomplete, 'open').and.callThrough();
spyOn(autocomplete, 'close').and.callThrough();
spyOn(autocomplete.target, 'open').and.callThrough();
spyOn(autocomplete.target, 'close').and.callThrough();

UIInteractions.sendInput(input, 's', fixture);
fixture.detectChanges();
expect(dropDown.collapsed).toBeFalsy();
expect(autocomplete.open).toHaveBeenCalledTimes(1);
expect(autocomplete.target.open).toHaveBeenCalledTimes(1);

autocomplete.disabled = true;
autocomplete.close();
tick();
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(autocomplete.close).toHaveBeenCalledTimes(1);
expect(autocomplete.target.close).toHaveBeenCalledTimes(1);
UIInteractions.sendInput(input, 's', fixture);
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(autocomplete.open).toHaveBeenCalledTimes(1);
expect(autocomplete.target.open).toHaveBeenCalledTimes(1);
}));
it('Should not close the dropdown when clicked on a input or the group', fakeAsync(() => {
UIInteractions.sendInput(input, 's', fixture);
Expand Down Expand Up @@ -280,9 +280,8 @@ describe('IgxAutocomplete', () => {
expect(dropdownList.nativeElement.attributes['aria-hidden'].value).toEqual('true');
expect(dropdownList.children.length).toEqual(0);
});
it('Should not open dropdown when disabled', () => {
it('Should not open dropdown when disabled', fakeAsync(() => {
fixture.detectChanges();
spyOn(autocomplete, 'open').and.callThrough();
spyOn(autocomplete.target, 'open').and.callThrough();
const dropdownListElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST));

Expand All @@ -293,9 +292,43 @@ describe('IgxAutocomplete', () => {
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(dropdownListElement.children.length).toEqual(0);
expect(autocomplete.open).toHaveBeenCalledTimes(0);
expect(autocomplete.target.open).toHaveBeenCalledTimes(0);
});

autocomplete.open();
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(dropdownListElement.children.length).toEqual(0);
expect(autocomplete.target.open).toHaveBeenCalledTimes(0);

UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', input.nativeElement, true);
tick();
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(dropdownListElement.children.length).toEqual(0);
expect(autocomplete.target.open).toHaveBeenCalledTimes(0);

UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement, true);
tick();
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(dropdownListElement.children.length).toEqual(0);
expect(autocomplete.target.open).toHaveBeenCalledTimes(0);

const altKey = true;
UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', input.nativeElement, true, altKey);
tick();
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(dropdownListElement.children.length).toEqual(0);
expect(autocomplete.target.open).toHaveBeenCalledTimes(0);

UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement, true, altKey);
tick();
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
expect(dropdownListElement.children.length).toEqual(0);
expect(autocomplete.target.open).toHaveBeenCalledTimes(0);
}));
it('Should select item when drop down item is clicked', fakeAsync(() => {
const startsWith = 's';
const filteredTowns = fixture.componentInstance.filterTowns(startsWith);
Expand Down Expand Up @@ -552,24 +585,19 @@ describe('IgxAutocomplete', () => {
let startsWith = 'g';
spyOn(autocomplete, 'onInput').and.callThrough();
spyOn(autocomplete, 'handleKeyDown').and.callThrough();
spyOn(autocomplete, 'open').and.callThrough();
spyOn(autocomplete, 'close').and.callThrough();
spyOn(autocomplete.target, 'open').and.callThrough();
spyOn(autocomplete.target, 'close').and.callThrough();
spyOn(autocomplete.target, 'open').and.callThrough();

UIInteractions.sendInput(input, startsWith, fixture);
fixture.detectChanges();
expect(autocomplete.onInput).toHaveBeenCalledTimes(1);
expect(autocomplete.open).toHaveBeenCalledTimes(1);
expect(autocomplete.target.open).toHaveBeenCalledTimes(1);

startsWith = 'ga';
UIInteractions.sendInput(input, startsWith, fixture);
fixture.detectChanges();
expect(autocomplete.onInput).toHaveBeenCalledTimes(2);
// Keeps dropdown opened
expect(autocomplete.open).toHaveBeenCalledTimes(1);
expect(autocomplete.target.open).toHaveBeenCalledTimes(1);
expect(autocomplete.close).toHaveBeenCalledTimes(0);
expect(autocomplete.target.close).toHaveBeenCalledTimes(0);

Expand All @@ -593,7 +621,6 @@ describe('IgxAutocomplete', () => {
fixture.detectChanges();
tick();
expect(autocomplete.onInput).toHaveBeenCalledTimes(3);
expect(autocomplete.open).toHaveBeenCalledTimes(2);
expect(autocomplete.target.open).toHaveBeenCalledTimes(2);
}));
it('Should navigate through dropdown items with arrow up/down keys', () => {
Expand Down
9 changes: 2 additions & 7 deletions projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,12 +203,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
/** @hidden @internal */
@HostListener('input', ['$event'])
onInput() {
if (this.disabled) {
return;
}
if (this.collapsed) {
this.open();
}
this.open();
}

/** @hidden @internal */
Expand Down Expand Up @@ -279,7 +274,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
* Opens autocomplete drop down
*/
public open() {
if (!this.collapsed) {
if (this.disabled || !this.collapsed) {
return;
}
this.target.width = this.parentElement.clientWidth + 'px';
Expand Down
14 changes: 5 additions & 9 deletions projects/igniteui-angular/src/lib/grids/grid.common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -644,23 +644,19 @@ export class ContainerPositioningStrategy extends ConnectedPositioningStrategy {
position(contentElement: HTMLElement, size: { width: number, height: number }, document?: Document, initialCall?: boolean): void {
const container = this.settings.container; // grid.tbody
const target = <HTMLElement>this.settings.target; // current grid.row
super.position(contentElement, { width: target.clientWidth, height: target.clientHeight }, document, initialCall);

// Position of the overlay depends on the available space in the grid.
// If the bottom space is not enough then the the row overlay will show at the top of the row.
// Once shown, either top or bottom, then this position stays until the overlay is closed (isTopInitialPosition property),
// which means that when scrolling then overlay may hide, while the row is still visible (UX requirement).
this.isTop = this.isTopInitialPosition !== null ?
this.isTopInitialPosition :
container.clientHeight <
target.offsetTop + target.getBoundingClientRect().height + contentElement.getBoundingClientRect().height;
this.settings.verticalStartPoint = this.isTop ? VerticalAlignment.Top : VerticalAlignment.Bottom;
container.getBoundingClientRect().bottom <
target.getBoundingClientRect().bottom + contentElement.getBoundingClientRect().height;

this.settings.verticalStartPoint = this.settings.verticalDirection = this.isTop ? VerticalAlignment.Top : VerticalAlignment.Bottom;
this.settings.openAnimation = this.isTop ? scaleInVerBottom : scaleInVerTop;
const startPoint = getPointFromPositionsSettings(this.settings, contentElement.parentElement);

// TODO: extract transform setting in util function
const top = startPoint.y + (this.isTop ? VerticalAlignment.Top : VerticalAlignment.Bottom) * size.height;
contentElement.style.top = `${top}px`;
contentElement.style.width = target.clientWidth + 'px';
super.position(contentElement, { width: target.clientWidth, height: target.clientHeight }, document, initialCall);
}
}
16 changes: 16 additions & 0 deletions .../igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,12 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
this.grid.parent.unpinnedColumns[this.grid.parent.unpinnedColumns.length - 1].visibleIndex);
}
}
} else if (visibleColumnIndex === 0 && currentRowEl.previousElementSibling &&
currentRowEl.previousElementSibling.children[0].tagName.toLowerCase() === 'igx-child-grid-row') {
const gridElem = currentRowEl.previousElementSibling.querySelector('igx-hierarchical-grid');
const childGridID = gridElem.getAttribute('id');
const childGrid = this.getChildGrid(childGridID, this.grid);
this.navigateUp(currentRowEl, rowIndex, childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex);
} else {
super.performShiftTabKey(currentRowEl, rowIndex, visibleColumnIndex);
}
Expand Down Expand Up @@ -276,6 +282,11 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
const gridElem = elem.querySelector('igx-hierarchical-grid');
const childGridID = gridElem.getAttribute('id');
const childGrid = this.getChildGrid(childGridID, grid);

// Update column index since the next child can have in general less columns than visibleColumnIndex value.
const lastCellIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex;
visibleColumnIndex = Math.min(lastCellIndex, visibleColumnIndex);

if (childGrid.rowList.toArray().length === 0) {
this.focusNext(visibleColumnIndex, childGrid);
return;
Expand All @@ -300,6 +311,11 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
const gridElem = grids[grids.length - 1];
const childGridID = gridElem.getAttribute('id');
const childGrid = this.getChildGrid(childGridID, grid);

// Update column index since the previous child can have in general less columns than visibleColumnIndex value.
const lastCellIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex;
visibleColumnIndex = Math.min(lastCellIndex, visibleColumnIndex);

if (childGrid.rowList.toArray().length === 0) {
this.focusPrev(visibleColumnIndex, childGrid);
return;
Expand Down
Loading

0 comments on commit 6ca70bb

Please sign in to comment.