refactor(igx-combo): remove override for inherited functions in combo, …

…#1260
IgniteUI · May 16, 2018 · 47c2fa1 · 47c2fa1
1 parent 55bcb7f
commit 47c2fa1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 62 deletions.
diff --git a/src/combo/combo-item.component.ts b/src/combo/combo-item.component.ts
@@ -47,11 +47,4 @@ export class IgxComboItemComponent extends IgxDropDownItemTemplate {
         this.parentElement.changeFocusedItem(this, this.parentElement.lastFocused);
         this.parentElement.setSelectedItem(this.itemID);
     }
-
-    @HostListener("keydown.Space", ["$event"])
-    onSpaceKeyDown(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.markItemSelected();
-    }
 }
diff --git a/src/combo/combo.component.html b/src/combo/combo.component.html
@@ -12,11 +12,12 @@
     <igx-input-group>
         <input igxInput name="comboInput" type="text" [(ngModel)]="value" width="90%" readonly/>
     </igx-input-group>
-    <div (click)="toggle()" igxRipple width="10%">{{toggleDirective.collapsed ? "V" : "^"}}</div>
+    <button (click)="toggle()" igxRipple width="10%">{{toggleDirective.collapsed ? "V" : "^"}}</button>
     <div class="igx-drop-down__list" igxToggle (onOpening)="onToggleOpening()" (onOpened)="onToggleOpened()" (onClosed)="onToggleClosed()">
         <ng-container *ngIf="!toggleDirective.collapsed">
             <igx-input-group>
-                <input igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue" (keyup)="handleKeyDown($event)"/>
+                <input igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue" (keyup)="handleKeyDown($event)" placeholder="Enter a search term"
+                />
             </igx-input-group>
             <ng-container *ngTemplateOutlet="dropdownHeader; context: {$impicit: this}">
             </ng-container>

diff --git a/src/combo/combo.component.ts b/src/combo/combo.component.ts
@@ -55,8 +55,8 @@ export class IgxComboComponent extends IgxDropDownTemplate implements OnInit, On
     get caller() {
         return this;
     }
-    public value = "";
-    public searchValue = "";
+    private _value = "";
+    private _searchValue = "";
 
     constructor(
         protected elementRef: ElementRef,
@@ -70,12 +70,12 @@ export class IgxComboComponent extends IgxDropDownTemplate implements OnInit, On
     @ViewChild(IgxInputGroupComponent, { read: IgxInputGroupComponent })
     public inputGroup: IgxInputGroupComponent;
 
+    @ViewChild("searchInput")
+    public searchInput: ElementRef;
+
     @ViewChild("primitive", { read: TemplateRef })
     protected primitiveTemplate: TemplateRef<any>;
 
-    @ViewChild("searchInput", { read: TemplateRef })
-    protected searchInput: TemplateRef<any>;
-
     @ViewChild("complex", { read: TemplateRef })
     protected complexTemplate: TemplateRef<any>;
 
@@ -132,25 +132,28 @@ export class IgxComboComponent extends IgxDropDownTemplate implements OnInit, On
         return this._focusedItem;
     }
 
+    get value(): string {
+        return this._value;
+    }
+
+    set value(val) {
+        this._value = val;
+    }
+
+    get searchValue() {
+        return this._searchValue;
+    }
+
+    set searchValue(val: string) {
+        this._searchValue = val;
+    }
     @Input()
     public filterable;
 
     @Output()
     public onSelection = new EventEmitter<IComboSelectionChangeEventArgs>();
     /* */
 
-    public get headers(): any[] {
-        const headers: IgxComboItemComponent[] = [];
-        if (this.children !== undefined) {
-            for (const child of this.children.toArray()) {
-                if (child.isHeader) {
-                    headers.push(child);
-                }
-            }
-        }
-
-        return headers;
-    }
     public get filteredData(): any[] {
         return this._filteredData;
     }
@@ -211,42 +214,17 @@ export class IgxComboComponent extends IgxDropDownTemplate implements OnInit, On
 
     onToggleOpening() {
         this.cdr.detectChanges();
-        if (this._lastSelected) {
-            this.scrollToItem(this._lastSelected);
-        }
+        this.searchValue = "";
+        this.searchInput.nativeElement.focus();
         this.onOpening.emit();
     }
 
     onToggleOpened() {
         this._initiallySelectedItem = this._lastSelected;
         this._focusedItem = this._lastSelected;
-        if (this._focusedItem) {
-            this._focusedItem.isFocused = true;
-        } else if (this.allowItemsFocus) {
-            const firstItemIndex = this.getNearestSiblingFocusableItemIndex(-1, MoveDirection.Down);
-            if (firstItemIndex !== -1) {
-                this.changeFocusedItem(this.items[firstItemIndex]);
-            }
-        }
         this.onOpened.emit();
     }
 
-    /**
-     * Get all non-header items
-     */
-    public get items(): any[] {
-        const items: IgxComboItemComponent[] = [];
-        if (this.children !== undefined) {
-            for (const child of this.children.toArray()) {
-                if (!child.isHeader) {
-                    items.push(child);
-                }
-            }
-        }
-
-        return items;
-    }
-
     protected prepare_filtering_expression(searchVal, condition, ignoreCase, fieldName?) {
         if (fieldName !== undefined) {
             return [{ fieldName, searchVal, condition, ignoreCase }];
@@ -258,14 +236,9 @@ export class IgxComboComponent extends IgxDropDownTemplate implements OnInit, On
         this.filteringExpressions = this.prepare_filtering_expression(term, condition, ignoreCase, valueKey);
     }
 
-    /**
-     * Get all header items
-     */
-
     public ngOnInit() {
         this._filteredData = this.data;
         this.id += currentItem++;
-        this.allowItemsFocus = false;
     }
 
     ngOnDestroy() {

diff --git a/src/drop-down/drop-down.component.ts b/src/drop-down/drop-down.component.ts
@@ -155,8 +155,8 @@ export class IgxDropDownTemplate implements IToggleView, OnInit {
     /**
      * Get all non-header items
      */
-    public get items(): IgxDropDownItemComponent[] {
-        const items: IgxDropDownItemComponent[] = [];
+    public get items(): any[] {
+        const items: any[] = [];
         if (this.children !== undefined) {
             for (const child of this.children.toArray()) {
                 if (!child.isHeader) {
@@ -171,8 +171,8 @@ export class IgxDropDownTemplate implements IToggleView, OnInit {
     /**
      * Get all header items
      */
-    public get headers(): IgxDropDownItemComponent[] {
-        const headers: IgxDropDownItemComponent[] = [];
+    public get headers(): any[] {
+        const headers: any[] = [];
         if (this.children !== undefined) {
             for (const child of this.children.toArray()) {
                 if (child.isHeader) {