Skip to content

Commit 661ae1e

Browse files
LipataLipata
authored
Merge branch 'master' into mvenkov/react-form-sample
2 parents 407355c + e0e2290 commit 661ae1e

File tree

9 files changed

+111
-7
lines changed

9 files changed

+111
-7
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ All notable changes for each version of this project will be documented in this
1414
```typescript
1515
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
1616
```
17+
- `IgxCombo`:
18+
- 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.
1719

1820
### RTL Support
1921
- `igxSlider` have full right-to-left (RTL) support.
@@ -2487,4 +2489,3 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
24872489
- `IgxDraggableDirective` moved inside `../directives/dragdrop/` folder
24882490
- `IgxRippleDirective` moved inside `../directives/ripple/` folder
24892491
- Folder `"./navigation/nav-service"` renamed to `"./navigation/nav.service"`
2490-

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
314314
| `type` | Combo style. - "line", "box", "border", "search" | string |
315315
| `valid` | gets if control is valid, when used in a form | boolean |
316316
| `overlaySettings` | gets/sets the custom overlay settings that control how the drop-down list displays | OverlaySettings |
317+
| `autoFocusSearch` | controls whether the search input should be focused when the combo is opened | boolean |
317318

318319
### Getters
319320
| Name | Description | Type |

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,24 @@ describe('igxCombo', () => {
149149
expect(combo.dropdown.toggle).toHaveBeenCalledTimes(1);
150150
expect(combo.collapsed).toBe(false);
151151
});
152+
it(`should not focus search input when property autoFocusSearch=false`, () => {
153+
combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
154+
const dropdownContainer = { nativeElement: { focus: () => {}}};
155+
combo['dropdownContainer'] = dropdownContainer;
156+
spyOn(combo, 'focusSearchInput');
157+
158+
combo.autoFocusSearch = false;
159+
combo.handleOpened();
160+
expect(combo.focusSearchInput).toHaveBeenCalledTimes(0);
161+
162+
combo.autoFocusSearch = true;
163+
combo.handleOpened();
164+
expect(combo.focusSearchInput).toHaveBeenCalledTimes(1);
165+
166+
combo.autoFocusSearch = false;
167+
combo.handleOpened();
168+
expect(combo.focusSearchInput).toHaveBeenCalledTimes(1);
169+
});
152170
it('should call dropdown toggle with correct overlaySettings', () => {
153171
combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
154172
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['toggle']);
@@ -788,6 +806,19 @@ describe('igxCombo', () => {
788806
fixture.detectChanges();
789807
expect(combo.searchInput).toBeFalsy();
790808
});
809+
it('should focus search input', fakeAsync(() => {
810+
combo.toggle();
811+
tick();
812+
fixture.detectChanges();
813+
expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
814+
}));
815+
it('should not focus search input, when autoFocusSearch=false', fakeAsync(() => {
816+
combo.autoFocusSearch = false;
817+
combo.toggle();
818+
tick();
819+
fixture.detectChanges();
820+
expect(document.activeElement).not.toEqual(combo.searchInput.nativeElement);
821+
}));
791822
it('should properly initialize templates', () => {
792823
expect(combo).toBeDefined();
793824
expect(combo.footerTemplate).toBeDefined();
@@ -983,7 +1014,7 @@ describe('igxCombo', () => {
9831014

9841015
productIndex = 485;
9851016
combo.virtualScrollContainer.scrollTo(productIndex);
986-
await wait();
1017+
await wait(30);
9871018
fixture.detectChanges();
9881019
verifyComboData();
9891020
expect(combo.virtualizationState.startIndex + combo.virtualizationState.chunkSize - 1)

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -813,6 +813,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
813813
@Input()
814814
public type = 'box';
815815

816+
/**
817+
* An @Input property that controls whether the combo's search box
818+
* should be focused after the `onOpened` event is called
819+
* When `false`, the combo's list item container will be focused instead
820+
*/
821+
@Input()
822+
public autoFocusSearch = true;
823+
816824
/**
817825
* Gets if control is valid, when used in a form
818826
*
@@ -1480,7 +1488,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
14801488
*/
14811489
public handleOpened() {
14821490
this.triggerCheck();
1483-
this.focusSearchInput(true);
1491+
1492+
// Disabling focus of the search input should happen only when drop down opens.
1493+
// During keyboard navigation input should receive focus, even the autoFocusSearch is disabled.
1494+
// That is why in such cases focusing of the dropdownContainer happens outside focusSearchInput method.
1495+
if (this.autoFocusSearch) {
1496+
this.focusSearchInput(true);
1497+
} else {
1498+
this.dropdownContainer.nativeElement.focus();
1499+
}
14841500
this.onOpened.emit();
14851501
}
14861502

‎projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1185,15 +1185,18 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
11851185
this.scrollComponent.size = totalWidth;
11861186
if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
11871187
this.scrollPosition = 0;
1188+
// Need to reset the scrollAmount value here, because horizontalScrollBar is hidden, therefore
1189+
// onScroll event handler for VirtualHelperBaseDirective will not be called
1190+
this.scrollComponent.scrollAmount = 0;
11881191
}
11891192
}
11901193
if (this.igxForScrollOrientation === 'vertical') {
11911194
this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';
11921195
this.scrollComponent.size = this._calcHeight();
11931196
if ( this.scrollComponent.size <= parseInt(this.igxForContainerSize, 10)) {
11941197
this.scrollPosition = 0;
1195-
// Need to reset the scrollAmount value here, because
1196-
// Firefox will not fire the scrollComponent scroll event handler
1198+
// Need to reset the scrollAmount value here, because verticalScrollBar is hidden, therefore
1199+
// onScroll event handler for VirtualHelperBaseDirective will not be called
11971200
this.scrollComponent.scrollAmount = 0;
11981201
}
11991202
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,26 @@ export class IgxExcelStyleColumnMovingComponent {
4848
public onMoveButtonClicked(moveDirection) {
4949
let targetColumn;
5050
if (this.column.pinned) {
51-
if (this.column.isLastPinned && moveDirection === 1) {
51+
if (this.column.isLastPinned && moveDirection === 1 && this.grid.isPinningToStart) {
5252
targetColumn = this.grid.unpinnedColumns[0];
5353
moveDirection = 0;
54+
} else if (this.column.isFirstPinned && moveDirection === 0 && !this.grid.isPinningToStart) {
55+
targetColumn = this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1];
56+
moveDirection = 1;
5457
} else {
5558
targetColumn = this.findColumn(moveDirection, this.grid.pinnedColumns);
5659
}
57-
} else if (this.grid.unpinnedColumns.indexOf(this.column) === 0 && moveDirection === 0) {
60+
} else if (this.grid.unpinnedColumns.indexOf(this.column) === 0 && moveDirection === 0 &&
61+
this.grid.isPinningToStart) {
5862
targetColumn = this.grid.pinnedColumns[this.grid.pinnedColumns.length - 1];
5963
if (targetColumn.parent) {
6064
targetColumn = targetColumn.topLevelParent;
6165
}
6266
moveDirection = 1;
67+
} else if (this.grid.unpinnedColumns.indexOf(this.column) === this.grid.unpinnedColumns.length - 1 &&
68+
moveDirection === 1 && !this.grid.isPinningToStart) {
69+
targetColumn = this.grid.pinnedColumns[0];
70+
moveDirection = 0;
6371
} else {
6472
targetColumn = this.findColumn(moveDirection, this.grid.unpinnedColumns);
6573
}

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2580,6 +2580,47 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
25802580
ControlsFunction.verifyButtonIsDisabled(moveLeft, false);
25812581
}));
25822582

2583+
it('Should right pin and unpin column after moving it left/right when clicking buttons.', fakeAsync(() => {
2584+
grid.pinning.columns = 1;
2585+
2586+
const columnToPin = grid.columns[grid.columns.length - 2];
2587+
columnToPin.pinned = true;
2588+
fix.detectChanges();
2589+
2590+
expect(grid.pinnedColumns.length).toBe(1);
2591+
2592+
const columnToMove = grid.unpinnedColumns[grid.unpinnedColumns.length - 1];
2593+
columnToMove.movable = true;
2594+
2595+
GridFunctions.clickExcelFilterIconFromCode(fix, grid, columnToMove.field);
2596+
2597+
const moveLeft = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[0];
2598+
const moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1];
2599+
2600+
moveRight.click();
2601+
fix.detectChanges();
2602+
2603+
expect(grid.pinnedColumns.length).toBe(2);
2604+
2605+
expect(grid.pinnedColumns[0].field).toBe(columnToMove.field);
2606+
expect(grid.pinnedColumns[1].field).toBe(columnToPin.field);
2607+
2608+
moveRight.click();
2609+
fix.detectChanges();
2610+
2611+
expect(grid.pinnedColumns[0].field).toBe(columnToPin.field);
2612+
expect(grid.pinnedColumns[1].field).toBe(columnToMove.field);
2613+
2614+
moveLeft.click();
2615+
fix.detectChanges();
2616+
2617+
moveLeft.click();
2618+
fix.detectChanges();
2619+
2620+
expect(grid.pinnedColumns.length).toBe(1);
2621+
expect(grid.pinnedColumns[0].field).toBe(columnToPin.field);
2622+
}));
2623+
25832624
it('Should pin column when clicking buttons.', fakeAsync(() => {
25842625
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
25852626

‎src/app/combo/combo.sample.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
[data]="items"
2323
[allowCustomValues]="customValuesFlag"
2424
[displayDensity]="'comfortable'"
25+
[autoFocusSearch]="autoFocusSearch"
2526
[filterable]="filterableFlag" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
2627
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
2728
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
@@ -101,6 +102,7 @@ <h4>Display Density</h4>
101102
<h4>Search Input</h4>
102103
<igx-switch [(ngModel)]="filterableFlag">Filterable</igx-switch><br/>
103104
<igx-switch [(ngModel)]="customValuesFlag">Custom Values</igx-switch>
105+
<igx-switch [(ngModel)]="autoFocusSearch">Automatic Search Focus</igx-switch>
104106
</div>
105107
<div>
106108
<h4>Overlay Settings</h4>

‎src/app/combo/combo.sample.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
4343
private initData: any[] = [];
4444
public filterableFlag = true;
4545
public customValuesFlag = true;
46+
public autoFocusSearch = true;
4647
public items: any[] = [];
4748
public values1: Array<any>;
4849
public values2: Array<any>;

0 commit comments

Comments
 (0)