Fix - Combo - Hide Search input when !filterable && !allowCustomValues - 6.2.x

projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

@@ -124,7 +124,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
      */
     navigatePrev() {
         if (this._focusedItem.index === 0 && this.verticalScrollContainer.state.startIndex === 0) {
-            this.combo.searchInput.nativeElement.focus();
+            this.combo.focusSearchInput(false);
         } else {
             super.navigatePrev();
         }
@@ -309,7 +309,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
     }
 
     private focusComboSearch() {
-        this.combo.searchInput.nativeElement.focus();
+        this.combo.focusSearchInput(false);
         if (this.focusedItem) {
             this.focusedItem.isFocused = false;
         }
@@ -349,7 +349,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
      */
     onToggleOpened() {
         this.combo.triggerCheck();
-        this.combo.searchInput.nativeElement.focus();
+        this.combo.focusSearchInput(true);
         this.onOpened.emit();
     }
 

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -26,6 +26,7 @@ export interface IgxComboBase {
     onClosing: EventEmitter<CancelableEventArgs>;
     onClosed: EventEmitter<void>;
 
+    focusSearchInput(opening?: boolean): void;
     triggerCheck();
     setSelectedItem(itemID: any, select?: boolean);
     isItemSelected(item: any): boolean;

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -28,7 +28,7 @@
     </igx-suffix>
 </igx-input-group>
 <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
-    <igx-input-group [displayDensity]="displayDensity" class="igx-combo__search">
+    <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" class="igx-combo__search">
         <input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue"
             (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)"
             (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"

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

@@ -1933,6 +1933,19 @@ describe('igxCombo', () => {
             expect(dropDownWidth).toEqual(comboWidth);
             expect(inputWidth).toEqual(comboWidth);
         }));
+
+        it(`Should not render a search input if both 'allowCustomValues' and 'filterable' are false`, fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxComboSampleComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.combo;
+            combo.allowCustomValues = false;
+            combo.filterable = false;
+            expect(combo.displaySearchInput).toBeFalsy();
+            combo.toggle();
+            tick();
+            fixture.detectChanges();
+            expect(combo.searchInput).toBeFalsy();
+        }));
     });
 
     describe('Virtualization tests: ', () => {
@@ -2879,7 +2892,7 @@ describe('igxCombo', () => {
             expect(combo.value).toEqual('My New Custom Item');
         }));
 
-        it('Disable/Enable filtering at runtime', fakeAsync(() => {
+       it('Disable/Enable filtering at runtime', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxComboInputTestComponent);
             fix.detectChanges();
             const combo = fix.componentInstance.combo;
@@ -2903,8 +2916,8 @@ describe('igxCombo', () => {
             tick();
             fix.detectChanges();
             expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled
-            combo.searchInput.nativeElement.value = 'Not-available item';
-            combo.searchInput.nativeElement.dispatchEvent(new Event('input', {}));
+            combo.searchValue = 'Not-available item';
+            combo.handleInputChange();
             tick();
             fix.detectChanges();
             expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled

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

@@ -216,6 +216,13 @@ export class IgxComboComponent extends DisplayDensityBase implements AfterViewIn
         return this._comboInput;
     }
 
+    /**
+     * @hidden
+     */
+    get displaySearchInput(): boolean {
+        return this.filterable || this.allowCustomValues;
+    }
+
     /**
      * @hidden
      */
@@ -1263,12 +1270,28 @@ export class IgxComboComponent extends DisplayDensityBase implements AfterViewIn
         this.data = cloneArray(this.data);
         this.changeSelectedItem(addedItem, true);
         this.customValueFlag = false;
-        if (this.searchInput) {
+        this.searchInput.nativeElement.focus();
+        this.handleInputChange();
+    }
+
+    /**
+     * @hidden;
+     */
+    public focusSearchInput(opening?: boolean): void {
+        if (this.displaySearchInput && this.searchInput) {
             this.searchInput.nativeElement.focus();
+        } else {
+            if (opening) {
+                this.dropdownContainer.nativeElement.focus();
+                this.dropdown.onFocus();
+            } else {
+                this.comboInput.nativeElement.focus();
+                this.toggle();
+            }
         }
-        this.handleInputChange();
     }
 
+
     /**
      * @hidden
      */

src/app/combo/combo.sample.html

@@ -19,9 +19,9 @@
                 <igx-combo class="input-container" placeholder="Location(s)"
                             (onAddition)="handleAddition($event)"
                             [data]="items"
-                            [allowCustomValues]="true"
+                            [allowCustomValues]="customValuesFlag"
                             [displayDensity]="'comfortable'"
-                            [filterable]="true" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
+                            [filterable]="filterableFlag" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
                                 [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
                     <ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
                         <div class="state-card--simple">
@@ -68,6 +68,11 @@ <h4>Display Density</h4>
             <button igxButton="raised" [disabled]="igxCombo.isCosy()" (click)="setDensity('cosy')">Cosy</button>
             <button igxButton="raised" [disabled]="!igxCombo.isCosy() && !igxCombo.isCompact()" (click)="setDensity('comfortable')">Comfortable</button>
         </div>
+        <div>
+            <h4>Search Input</h4>
+            <igx-switch [(ngModel)]="filterableFlag">Filterable</igx-switch><br/>
+            <igx-switch [(ngModel)]="customValuesFlag">Custom Values</igx-switch>
+        </div>
     </section>
     </div>
 </div>

src/app/combo/combo.sample.ts

@@ -36,6 +36,8 @@ export class ComboSampleComponent implements OnInit {
     @ViewChild('comboTemplate', { read: IgxComboComponent }) public comboTemplate: IgxComboComponent;
     public toggleItemState = false;
     private initData: any[] = [];
+    public filterableFlag = false;
+    public customValuesFlag = false;
     public items: any[] = [];
     public valueKeyVar = 'field';
     public currentDataType = '';
@@ -98,9 +100,11 @@ export class ComboSampleComponent implements OnInit {
 
         this.igxCombo.dropdown.onOpened.pipe(take(1)).subscribe(() => {
             console.log('Attaching');
-            this.igxCombo.searchInput.nativeElement.onchange = (e) => {
-                console.log(e);
-            };
+            if (this.igxCombo.searchInput) {
+                this.igxCombo.searchInput.nativeElement.onchange = (e) => {
+                    console.log(e);
+                };
+            }
         });
 
         this.igxCombo.dropdown.onClosing.subscribe(() => {