Skip to content

Commit

Permalink
refactor(igx-autocomplete): apply comments #3585
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lipata
Lipata committed Feb 11, 2019
1 parent 0d76034 commit bb6380a
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 55 deletions.
19 changes: 10 additions & 9 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 @@ -140,6 +140,7 @@ describe('IgxAutocomplete', () => {
expect(autocomplete.open).toHaveBeenCalledTimes(1);

autocomplete.disabled = true;
autocomplete.close();
tick();
fixture.detectChanges();
expect(dropDown.collapsed).toBeTruthy();
Expand Down Expand Up @@ -281,7 +282,7 @@ describe('IgxAutocomplete', () => {
it('Should not open dropdown when disabled', () => {
fixture.detectChanges();
spyOn(autocomplete, 'open').and.callThrough();
spyOn(autocomplete.dropdown, 'open').and.callThrough();
spyOn(autocomplete.target, 'open').and.callThrough();
const dropdownListElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST));

autocomplete.disabled = true;
Expand All @@ -292,7 +293,7 @@ describe('IgxAutocomplete', () => {
expect(dropDown.collapsed).toBeTruthy();
expect(dropdownListElement.children.length).toEqual(0);
expect(autocomplete.open).toHaveBeenCalledTimes(0);
expect(autocomplete.dropdown.open).toHaveBeenCalledTimes(0);
expect(autocomplete.target.open).toHaveBeenCalledTimes(0);
});
it('Should select item when drop down item is clicked', fakeAsync(() => {
const startsWith = 's';
Expand Down Expand Up @@ -552,32 +553,32 @@ describe('IgxAutocomplete', () => {
spyOn(autocomplete, 'handleKeyDown').and.callThrough();
spyOn(autocomplete, 'open').and.callThrough();
spyOn(autocomplete, 'close').and.callThrough();
spyOn(autocomplete.dropdown, 'open').and.callThrough();
spyOn(autocomplete.dropdown, 'close').and.callThrough();
spyOn(autocomplete.target, 'open').and.callThrough();
spyOn(autocomplete.target, 'close').and.callThrough();

UIInteractions.sendInput(input, startsWith, fixture);
fixture.detectChanges();
expect(autocomplete.onInput).toHaveBeenCalledTimes(1);
expect(autocomplete.open).toHaveBeenCalledTimes(1);
expect(autocomplete.dropdown.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.dropdown.open).toHaveBeenCalledTimes(1);
expect(autocomplete.target.open).toHaveBeenCalledTimes(1);
expect(autocomplete.close).toHaveBeenCalledTimes(0);
expect(autocomplete.dropdown.close).toHaveBeenCalledTimes(0);
expect(autocomplete.target.close).toHaveBeenCalledTimes(0);

UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
tick();
fixture.detectChanges();
expect(autocomplete.handleKeyDown).toHaveBeenCalledTimes(1);
expect(autocomplete.onInput).toHaveBeenCalledTimes(2);
expect(autocomplete.close).toHaveBeenCalledTimes(1);
expect(autocomplete.dropdown.close).toHaveBeenCalledTimes(2);
expect(autocomplete.target.close).toHaveBeenCalledTimes(2);

// IgxDropDownItemNavigationDirective handleKeyDown is not called when dropdown is closed
spyOn(IgxDropDownItemNavigationDirective.prototype, 'handleKeyDown').and.callThrough();
Expand All @@ -592,7 +593,7 @@ describe('IgxAutocomplete', () => {
tick();
expect(autocomplete.onInput).toHaveBeenCalledTimes(3);
expect(autocomplete.open).toHaveBeenCalledTimes(2);
expect(autocomplete.dropdown.open).toHaveBeenCalledTimes(2);
expect(autocomplete.target.open).toHaveBeenCalledTimes(2);
}));
it('Should navigate through dropdown items with arrow up/down keys', () => {
UIInteractions.sendInput(input, 'a', fixture);
Expand Down
69 changes: 27 additions & 42 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 @@ -61,7 +61,6 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
super(null);
}

private _disabled = false;
private settings: OverlaySettings = {
modal: false,
scrollStrategy: new AbsoluteScrollStrategy(),
Expand Down Expand Up @@ -91,17 +90,19 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
}

/**
* @hidden
* @internal
*/
target;

/**
* @hidden
* @internal
* Sets the target of the autocomplete directive
*
* ```html
* <!-- Set -->
* <input [igxAutocomplete]="dropdown" />
* ...
* <igx-drop-down #dropdown>
* ...
* </igx-drop-down>
* ```
*/
@Input('igxAutocomplete')
public dropdown: IgxDropDownComponent;
public target: IgxDropDownComponent;

/**
* Enables/disables autocomplete component
Expand All @@ -120,13 +121,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
* ```
*/
@Input('igxAutocompleteDisabled')
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.close();
}
public disabled = false;

/**
* Provide overlay settings for the autocomplete drop down
Expand Down Expand Up @@ -200,7 +195,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
*/
@HostBinding('attr.aria-owns')
public get ariaOwns() {
return this.dropdown.id;
return this.target.id;
}

/**
Expand All @@ -225,7 +220,8 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
@HostListener('keydown.Alt.ArrowDown', ['$event'])
@HostListener('keydown.ArrowUp', ['$event'])
@HostListener('keydown.Alt.ArrowUp', ['$event'])
onArrowDown() {
onArrowDown(event: Event) {
event.preventDefault();
this.open();
}

Expand Down Expand Up @@ -295,7 +291,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
if (this.collapsed) {
return;
}
this.dropdown.close();
this.target.close();
this.dropDownOpened$.next();
}

Expand All @@ -310,17 +306,16 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
if (!settings.positionStrategy.settings.target) {
settings.positionStrategy.settings.target = this.parentElement;
}
this.dropdown.open(settings);
this.target = this.dropdown;
this.dropdown.width = this.parentElement.clientWidth + 'px';
this.dropdown.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
this.dropdown.onOpened.pipe(first()).subscribe(() => { this.highlightFirstItem(); });
this.dropdown.onClosing.pipe(takeUntil(this.dropDownOpened$)).subscribe((args) => { this.onDropDownClosing(args); });
this.dropdown.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(() => this.highlightFirstItem());
this.target.open(settings);
this.target.width = this.parentElement.clientWidth + 'px';
this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem);
this.target.onClosing.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.onDropDownClosing);
this.target.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.highlightFirstItem);
}

private get collapsed(): boolean {
return this.dropdown ? this.dropdown.collapsed : true;
return this.target ? this.target.collapsed : true;
}

private select = (value: ISelectionEventArgs) => {
Expand All @@ -339,19 +334,9 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
this.nativeElement.click();
}

private highlightFirstItem() {
const focusedItem = this.dropdown.focusedItem;
if (focusedItem) {
focusedItem.focused = false;
this.dropdown.focusedItem = null;
}
const firstItem = this.dropdown.items[0];
if (firstItem) {
firstItem.isFocused = true;
this.dropdown.focusedItem = firstItem;
}
private highlightFirstItem = () => {
this.target.navigateFirst();
this.cdr.detectChanges();

this.reposition();
}

Expand All @@ -360,10 +345,10 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
* then reposition of the drop down should be called in order to align the filtered drop down to the top of the input.
*/
private reposition() {
setTimeout(() => { this.dropdown.toggleDirective.reposition(); });
setTimeout(() => { this.target.toggleDirective.reposition(); });
}

private onDropDownClosing(args) {
private onDropDownClosing = (args) => {
if (args.event && this.parentElement.contains(args.event.target)) {
args.cancel = true;
}
Expand Down
8 changes: 4 additions & 4 deletions src/app/autocomplete/autocomplete.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<form class="input-sample" action="/" method="POST" (ngSubmit)="onSubmit($event)">
<div class="box">
<igx-input-group class="group">
<igx-prefix igxRipple><igx-icon fontSet="material">place</igx-icon> </igx-prefix>
<igx-prefix><igx-icon fontSet="material">place</igx-icon> </igx-prefix>
<input igxInput name="towns" type="text" [(ngModel)]="townSelected" required
[igxAutocomplete]='townsPanel'/>
<label igxLabel for="towns">Towns</label>
Expand All @@ -18,11 +18,11 @@
</div>
<div class="box">
<igx-input-group class="group">
<igx-prefix igxRipple><igx-icon fontSet="material">place</igx-icon> </igx-prefix>
<igx-prefix><igx-icon fontSet="material">place</igx-icon> </igx-prefix>
<input igxInput name="townsDetailed" type="text" [(ngModel)]="townSelected" required
[igxAutocomplete]='townsDetailedPanel' [igxAutocompleteSettings]='settings' />
<label igxLabel for="townsDetailed">Towns Detailed</label>
<igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
<igx-suffix><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
</igx-input-group>
<igx-drop-down #townsDetailedPanel>
<igx-drop-down-item *ngFor="let town of townsDetailed | startsWith:townSelected:'name'" [value]="town.name">
Expand All @@ -33,7 +33,7 @@
</div>
<div class="box">
<igx-input-group class="group">
<igx-prefix igxRipple><igx-icon fontSet="material">{{ enabled ? 'place' : 'not_interested' }}</igx-icon> </igx-prefix>
<igx-prefix><igx-icon fontSet="material">{{ enabled ? 'place' : 'not_interested' }}</igx-icon> </igx-prefix>
<input igxInput name="townsDisabled" type="text" [(ngModel)]="townSelected" required
[igxAutocomplete]='townsDetailedPanel'
[igxAutocompleteDisabled]="!enabled"/>
Expand Down

0 comments on commit bb6380a

Please sign in to comment.