Merge branch 'master' into hPopov/fix-issue-6707-master

Author: hanastasov

CHANGELOG.md

@@ -14,6 +14,8 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
+- `IgxCombo`:
+    - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
 
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
@@ -2487,4 +2489,3 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     - `IgxDraggableDirective` moved inside `../directives/dragdrop/` folder
     - `IgxRippleDirective` moved inside `../directives/ripple/` folder
     - Folder `"./navigation/nav-service"` renamed to `"./navigation/nav.service"`
-

projects/igniteui-angular/src/lib/combo/README.md

@@ -314,6 +314,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 |  `type`                  | Combo style. - "line", "box", "border", "search"                                        | string                      |
 |  `valid`                 | gets if control is valid, when used in a form     | boolean                     |
 |  `overlaySettings`       | gets/sets the custom overlay settings that control how the drop-down list displays | OverlaySettings         |
+|  `autoFocusSearch`     | controls whether the search input should be focused when the combo is opened | boolean |
 
 ### Getters
 | Name                     | Description                                       | Type                        |

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

@@ -149,6 +149,24 @@ describe('igxCombo', () => {
             expect(combo.dropdown.toggle).toHaveBeenCalledTimes(1);
             expect(combo.collapsed).toBe(false);
         });
+        it(`should not focus search input when property autoFocusSearch=false`, () => {
+            combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
+            const dropdownContainer = { nativeElement: { focus: () => {}}};
+            combo['dropdownContainer'] = dropdownContainer;
+            spyOn(combo, 'focusSearchInput');
+
+            combo.autoFocusSearch = false;
+            combo.handleOpened();
+            expect(combo.focusSearchInput).toHaveBeenCalledTimes(0);
+
+            combo.autoFocusSearch = true;
+            combo.handleOpened();
+            expect(combo.focusSearchInput).toHaveBeenCalledTimes(1);
+
+            combo.autoFocusSearch = false;
+            combo.handleOpened();
+            expect(combo.focusSearchInput).toHaveBeenCalledTimes(1);
+        });
         it('should call dropdown toggle with correct overlaySettings', () => {
             combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
             const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['toggle']);
@@ -788,6 +806,19 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             expect(combo.searchInput).toBeFalsy();
         });
+        it('should focus search input', fakeAsync(() => {
+            combo.toggle();
+            tick();
+            fixture.detectChanges();
+            expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
+        }));
+        it('should not focus search input, when autoFocusSearch=false', fakeAsync(() => {
+            combo.autoFocusSearch = false;
+            combo.toggle();
+            tick();
+            fixture.detectChanges();
+            expect(document.activeElement).not.toEqual(combo.searchInput.nativeElement);
+        }));
         it('should properly initialize templates', () => {
             expect(combo).toBeDefined();
             expect(combo.footerTemplate).toBeDefined();
@@ -983,7 +1014,7 @@ describe('igxCombo', () => {
 
             productIndex = 485;
             combo.virtualScrollContainer.scrollTo(productIndex);
-            await wait();
+            await wait(30);
             fixture.detectChanges();
             verifyComboData();
             expect(combo.virtualizationState.startIndex + combo.virtualizationState.chunkSize - 1)

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

@@ -813,6 +813,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     @Input()
     public type = 'box';
 
+    /**
+     * An @Input property that controls whether the combo's search box
+     * should be focused after the `onOpened` event is called
+     * When `false`, the combo's list item container will be focused instead
+     */
+    @Input()
+    public autoFocusSearch = true;
+
     /**
      * Gets if control is valid, when used in a form
      *
@@ -1480,7 +1488,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public handleOpened() {
         this.triggerCheck();
-        this.focusSearchInput(true);
+
+        // Disabling focus of the search input should happen only when drop down opens.
+        // During keyboard navigation input should receive focus, even the autoFocusSearch is disabled.
+        // That is why in such cases focusing of the dropdownContainer happens outside focusSearchInput method.
+        if (this.autoFocusSearch) {
+            this.focusSearchInput(true);
+        } else {
+            this.dropdownContainer.nativeElement.focus();
+        }
         this.onOpened.emit();
     }
 

src/app/combo/combo.sample.html

@@ -22,6 +22,7 @@
                             [data]="items"
                             [allowCustomValues]="customValuesFlag"
                             [displayDensity]="'comfortable'"
+                            [autoFocusSearch]="autoFocusSearch"
                             [filterable]="filterableFlag" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
                                 [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
                     <ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
@@ -101,6 +102,7 @@ <h4>Display Density</h4>
             <h4>Search Input</h4>
             <igx-switch [(ngModel)]="filterableFlag">Filterable</igx-switch><br/>
             <igx-switch [(ngModel)]="customValuesFlag">Custom Values</igx-switch>
+            <igx-switch [(ngModel)]="autoFocusSearch">Automatic Search Focus</igx-switch>
         </div>
         <div>
             <h4>Overlay Settings</h4>

src/app/combo/combo.sample.ts

@@ -43,6 +43,7 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     private initData: any[] = [];
     public filterableFlag = true;
     public customValuesFlag = true;
+    public autoFocusSearch = true;
     public items: any[] = [];
     public values1:  Array<any>;
     public values2:  Array<any>;