Skip to content

Commit 4f04db4

Browse files
LipataLipata
authored
Merge pull request #8281 from IgniteUI/iganchev/excludepositiontarget-collection-8148
Upgrade excludePositionTarget to a collection of HTML Elements
2 parents fe80320 + 5e08566 commit 4f04db4

File tree

17 files changed

+275
-87
lines changed

17 files changed

+275
-87
lines changed

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -185,13 +185,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
185185
private _remoteSelection = {};
186186
private _onChangeCallback: (_: any) => void = noop;
187187
private _onTouchedCallback: () => void = noop;
188-
private _overlaySettings: OverlaySettings = {
189-
scrollStrategy: new AbsoluteScrollStrategy(),
190-
positionStrategy: new AutoPositionStrategy(),
191-
modal: false,
192-
closeOnOutsideClick: true,
193-
excludePositionTarget: true
194-
};
188+
private _overlaySettings: OverlaySettings;
195189
private _value = '';
196190
private _valid = IgxComboState.INITIAL;
197191
constructor(
@@ -1228,7 +1222,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
12281222
*/
12291223
public ngOnInit() {
12301224
this.ngControl = this._injector.get<NgControl>(NgControl, null);
1231-
this._overlaySettings.target = this.elementRef.nativeElement;
1225+
const targetElement = this.elementRef.nativeElement;
1226+
this._overlaySettings = {
1227+
target: targetElement,
1228+
scrollStrategy: new AbsoluteScrollStrategy(),
1229+
positionStrategy: new AutoPositionStrategy(),
1230+
modal: false,
1231+
closeOnOutsideClick: true,
1232+
excludeFromOutsideClick: [targetElement as HTMLElement]
1233+
};
12321234
this.selection.set(this.id, new Set());
12331235
this._iconService.addSvgIconFromText(caseSensitiveIcon.name, caseSensitiveIcon.value, 'case-sensitive');
12341236
}

‎projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import {
1212
Optional,
1313
Output,
1414
Self,
15-
AfterViewInit
15+
AfterViewInit,
16+
OnInit
1617
} from '@angular/core';
1718
import { NgModel, FormControlName } from '@angular/forms';
1819
import { CommonModule } from '@angular/common';
@@ -75,7 +76,7 @@ export interface AutocompleteOverlaySettings {
7576
@Directive({
7677
selector: '[igxAutocomplete]'
7778
})
78-
export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit {
79+
export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit, OnInit {
7980

8081
private _shouldBeOpen = false;
8182
constructor(@Self() @Optional() @Inject(NgModel) protected ngModel: NgModel,
@@ -87,13 +88,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
8788
}
8889
private destroy$ = new Subject();
8990

90-
private defaultSettings: OverlaySettings = {
91-
target: this.parentElement,
92-
modal: false,
93-
scrollStrategy: new AbsoluteScrollStrategy(),
94-
positionStrategy: new AutoPositionStrategy(),
95-
excludePositionTarget: true
96-
};
91+
private defaultSettings: OverlaySettings;
9792

9893
protected id: string;
9994
protected get model() {
@@ -348,6 +343,18 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
348343
this.cdr.detectChanges();
349344
}
350345

346+
/** @hidden @internal */
347+
public ngOnInit() {
348+
const targetElement = this.parentElement;
349+
this.defaultSettings = {
350+
target: targetElement,
351+
modal: false,
352+
scrollStrategy: new AbsoluteScrollStrategy(),
353+
positionStrategy: new AutoPositionStrategy(),
354+
excludeFromOutsideClick: [targetElement]
355+
};
356+
}
357+
351358
/** @hidden */
352359
public ngOnDestroy() {
353360
this.destroy$.next();

‎projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -470,15 +470,15 @@ describe('IgxToggle', () => {
470470
const fixture = TestBed.createComponent(IgxToggleActionTestComponent);
471471
fixture.detectChanges();
472472
spyOn(IgxToggleDirective.prototype, 'toggle');
473-
const button = fixture.debugElement.query(By.directive(IgxToggleActionDirective)).nativeElement;
473+
const button = fixture.debugElement.query(By.directive(IgxToggleActionDirective)).nativeElement as HTMLElement;
474474

475475
const defaults: OverlaySettings = {
476476
target: button,
477477
positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
478478
closeOnOutsideClick: true,
479479
modal: false,
480480
scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
481-
excludePositionTarget: true
481+
excludeFromOutsideClick: [button]
482482
};
483483

484484
fixture.componentInstance.toggleAction.onClick();
@@ -503,7 +503,7 @@ describe('IgxToggle', () => {
503503
closeOnOutsideClick: true,
504504
modal: false,
505505
scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
506-
excludePositionTarget: true
506+
excludeFromOutsideClick: [button]
507507
};
508508

509509
// defaults
@@ -538,7 +538,7 @@ describe('IgxToggle', () => {
538538
closeOnOutsideClick: true,
539539
modal: false,
540540
scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
541-
excludePositionTarget: true
541+
excludeFromOutsideClick: [button]
542542
};
543543
fixture.componentInstance.settings.positionStrategy = new ConnectedPositioningStrategy();
544544
fixture.detectChanges();
@@ -591,7 +591,7 @@ describe('IgxToggle', () => {
591591
modal: false,
592592
scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
593593
outlet: jasmine.any(IgxOverlayOutletDirective) as any,
594-
excludePositionTarget: true
594+
excludeFromOutsideClick: [button]
595595
};
596596

597597
fixture.componentInstance.toggleAction.onClick();

‎projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -444,13 +444,14 @@ export class IgxToggleActionDirective implements OnInit {
444444
* @hidden
445445
*/
446446
public ngOnInit() {
447+
const targetElement = this.element.nativeElement;
447448
this._overlayDefaults = {
448-
target: this.element.nativeElement,
449+
target: targetElement,
449450
positionStrategy: new ConnectedPositioningStrategy(),
450451
scrollStrategy: new AbsoluteScrollStrategy(),
451452
closeOnOutsideClick: true,
452453
modal: false,
453-
excludePositionTarget: true
454+
excludeFromOutsideClick: [targetElement as HTMLElement]
454455
};
455456
}
456457

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,21 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
356356
this.virtDir.getScroll().scrollTop = targetScroll;
357357
}
358358

359+
protected focusItem(value: boolean) {
360+
if (value || this._focusedItem) {
361+
this._focusedItem.focused = value;
362+
}
363+
}
364+
365+
protected updateItemFocus() {
366+
if (this.selectedItem) {
367+
this.focusedItem = this.selectedItem;
368+
this.focusItem(true);
369+
} else if (this.allowItemsFocus) {
370+
this.navigateFirst();
371+
}
372+
}
373+
359374
/**
360375
* @hidden @internal
361376
*/
@@ -383,12 +398,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
383398
* @hidden @internal
384399
*/
385400
public onToggleOpened() {
386-
if (this.selectedItem) {
387-
this.focusedItem = this.selectedItem;
388-
this._focusedItem.focused = true;
389-
} else if (this.allowItemsFocus) {
390-
this.navigateFirst();
391-
}
401+
this.updateItemFocus();
392402
this.onOpened.emit();
393403
}
394404

@@ -406,9 +416,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
406416
* @hidden @internal
407417
*/
408418
public onToggleClosed() {
409-
if (this._focusedItem) {
410-
this._focusedItem.focused = false;
411-
}
419+
this.focusItem(false);
412420
this.onClosed.emit();
413421
}
414422

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,8 +151,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
151151
public columnSelectOverlaySettings: OverlaySettings = {
152152
scrollStrategy: new AbsoluteScrollStrategy(),
153153
modal: false,
154-
closeOnOutsideClick: false,
155-
excludePositionTarget: true
154+
closeOnOutsideClick: false
156155
};
157156

158157
/**
@@ -161,8 +160,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
161160
public conditionSelectOverlaySettings: OverlaySettings = {
162161
scrollStrategy: new AbsoluteScrollStrategy(),
163162
modal: false,
164-
closeOnOutsideClick: false,
165-
excludePositionTarget: true
163+
closeOnOutsideClick: false
166164
};
167165

168166
/**
@@ -658,8 +656,10 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
658656
this.cdr.detectChanges();
659657

660658
this.columnSelectOverlaySettings.target = this.columnSelect.element;
659+
this.columnSelectOverlaySettings.excludeFromOutsideClick = [this.columnSelect.element as HTMLElement];
661660
this.columnSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
662661
this.conditionSelectOverlaySettings.target = this.conditionSelect.element;
662+
this.conditionSelectOverlaySettings.excludeFromOutsideClick = [this.conditionSelect.element as HTMLElement];
663663
this.conditionSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
664664

665665
if (!this.selectedColumn) {

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
4545
};
4646

4747
private _conditionsOverlaySettings: OverlaySettings = {
48-
excludePositionTarget: true,
4948
closeOnOutsideClick: true,
5049
modal: false,
5150
scrollStrategy: new AbsoluteScrollStrategy(),
5251
positionStrategy: new ConnectedPositioningStrategy(this._positionSettings)
5352
};
5453

5554
private _operatorsOverlaySettings: OverlaySettings = {
56-
excludePositionTarget: true,
5755
closeOnOutsideClick: true,
5856
modal: false,
5957
scrollStrategy: new AbsoluteScrollStrategy(),
@@ -511,6 +509,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
511509
*/
512510
public toggleConditionsDropDown(target: any) {
513511
this._conditionsOverlaySettings.target = target;
512+
this._conditionsOverlaySettings.excludeFromOutsideClick = [target as HTMLElement];
514513
this.dropDownConditions.toggle(this._conditionsOverlaySettings);
515514
}
516515

@@ -519,6 +518,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
519518
*/
520519
public toggleOperatorsDropDown(eventArgs, index) {
521520
this._operatorsOverlaySettings.target = eventArgs.target.parentElement;
521+
this._operatorsOverlaySettings.excludeFromOutsideClick = [eventArgs.target.parentElement as HTMLElement];
522522
this.dropDownOperators.toArray()[index].toggle(this._operatorsOverlaySettings);
523523
}
524524

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
4343
public dropDownOverlaySettings: OverlaySettings = {
4444
scrollStrategy: new AbsoluteScrollStrategy(),
4545
modal: false,
46-
closeOnOutsideClick: true,
47-
excludePositionTarget: true
46+
closeOnOutsideClick: true
4847
};
4948

5049
@Input()
@@ -118,6 +117,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
118117
ngAfterViewInit(): void {
119118
this.dropDownOverlaySettings.outlet = this.overlayOutlet;
120119
this.dropDownOverlaySettings.target = this.dropdownConditions.inputGroup.element.nativeElement;
120+
this.dropDownOverlaySettings.excludeFromOutsideClick = [this.dropdownConditions.inputGroup.element.nativeElement as HTMLElement];
121121
this.dropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy();
122122
}
123123

‎projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -260,8 +260,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
260260
positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
261261
scrollStrategy: new AbsoluteScrollStrategy(),
262262
modal: false,
263-
closeOnOutsideClick: true,
264-
excludePositionTarget: true
263+
closeOnOutsideClick: true
265264
};
266265

267266
/**
@@ -312,6 +311,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
312311
*/
313312
public exportClicked() {
314313
this._overlaySettings.target = this.exportButton.nativeElement;
314+
this._overlaySettings.excludeFromOutsideClick = [this.exportButton.nativeElement as HTMLElement];
315315
this._overlaySettings.outlet = this.grid.outlet;
316316
this.exportDropdown.toggle(this._overlaySettings);
317317
}

‎projects/igniteui-angular/src/lib/select/select-navigation.directive.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class IgxSelectItemNavigationDirective extends IgxDropDownItemNavigationD
2323

2424
/** Captures keydown events and calls the appropriate handlers on the target component */
2525
handleKeyDown(event: KeyboardEvent) {
26-
if (!event || event.shiftKey) {
26+
if (!event) {
2727
return;
2828
}
2929

@@ -57,6 +57,8 @@ export class IgxSelectItemNavigationDirective extends IgxDropDownItemNavigationD
5757
default:
5858
break;
5959
}
60+
} else if (key === 'tab' || event.shiftKey && key === 'tab') {
61+
this.target.close();
6062
}
6163

6264
super.handleKeyDown(event);

0 commit comments

Comments
 (0)