Skip to content

Commit 71eb4d3

Browse files
ViktorSlavovViktorSlavov
authored
fix(combo, dropdown): emit owner in opening and closing events, #8326 (#8347)
1 parent 23be00c commit 71eb4d3

File tree

12 files changed

+118
-53
lines changed

12 files changed

+118
-53
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,9 +336,9 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
336336
| `onSearchInput` | Emitted when an the search input's input event is triggered | true | { searchValue: `string` } |
337337
| `onAddition` | Emitted when an item is being added to the data collection | false | { oldCollection: `any[]`, addedItem: `<any>`, newCollection: `any[]` }|
338338
| `onDataPreLoad` | Emitted when new chunk of data is loaded from the virtualization | false | { event: `Event` } |
339-
| `onOpening` | Emitted before the dropdown is opened | false | { event: `Event` } |
339+
| `onOpening` | Emitted before the dropdown is opened | false | `IBaseCancelableBrowserEventArgs` |
340340
| `onOpened` | Emitted after the dropdown is opened | false | { event: `Event` } |
341-
| `onClosing` | Emitted before the dropdown is closed | false | { event: `Event` } |
341+
| `onClosing` | Emitted before the dropdown is closed | false | `IBaseCancelableBrowserEventArgs` |
342342
| `onClosed` | Emitted after the dropdown is closed | false | { event: `Event` } |
343343

344344
### Methods

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

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { DisplayDensity } from '../core/density';
1919
import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api';
2020
import { IgxSelectionAPIService } from '../core/selection';
2121
import { IgxIconService } from '../icon/public_api';
22+
import { IBaseCancelableBrowserEventArgs } from '../core/utils';
2223

2324
const CSS_CLASS_COMBO = 'igx-combo';
2425
const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -282,6 +283,45 @@ describe('igxCombo', () => {
282283
combo.selectItems([], true);
283284
expect(combo.selectedItems()).toEqual([]);
284285
});
286+
it('should emit owner on `onOpening` and `onClosing`', () => {
287+
combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService,
288+
mockIconService, null, null, mockInjector);
289+
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
290+
combo.ngOnInit();
291+
spyOn(combo.onOpening, 'emit').and.callThrough();
292+
spyOn(combo.onClosing, 'emit').and.callThrough();
293+
const mockObj = {};
294+
const inputEvent: IBaseCancelableBrowserEventArgs = {
295+
cancel: false,
296+
owner: mockObj,
297+
};
298+
combo.comboInput = <any>{
299+
nativeElement: {
300+
focus: () => {}
301+
}
302+
};
303+
combo.handleOpening(inputEvent);
304+
const expectedCall: IBaseCancelableBrowserEventArgs = Object.assign({}, inputEvent, { owner: combo });
305+
expect(combo.onOpening.emit).toHaveBeenCalledWith(expectedCall);
306+
expect(inputEvent.owner).toEqual(mockObj);
307+
combo.handleClosing(inputEvent);
308+
expect(combo.onClosing.emit).toHaveBeenCalledWith(expectedCall);
309+
expect(inputEvent.owner).toEqual(mockObj);
310+
let sub = combo.onOpening.subscribe((e: IBaseCancelableBrowserEventArgs) => {
311+
e.cancel = true;
312+
});
313+
combo.handleOpening(inputEvent);
314+
expect(inputEvent.cancel).toEqual(true);
315+
sub.unsubscribe();
316+
inputEvent.cancel = false;
317+
318+
sub = combo.onClosing.subscribe((e: IBaseCancelableBrowserEventArgs) => {
319+
e.cancel = true;
320+
});
321+
combo.handleClosing(inputEvent);
322+
expect(inputEvent.cancel).toEqual(true);
323+
sub.unsubscribe();
324+
});
285325
it('should fire onSelectionChange event on item selection', () => {
286326
const selectionService = new IgxSelectionAPIService();
287327
combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService,
@@ -299,12 +339,13 @@ describe('igxCombo', () => {
299339

300340
combo.selectItems(newSelection);
301341
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(1);
302-
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
342+
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
303343
oldSelection: oldSelection,
304344
newSelection: newSelection,
305345
added: newSelection,
306346
removed: [],
307347
event: undefined,
348+
owner: combo,
308349
displayText: `${newSelection.join(', ')}`,
309350
cancel: false
310351
});
@@ -314,12 +355,13 @@ describe('igxCombo', () => {
314355
oldSelection = [...newSelection];
315356
newSelection.push(newItem);
316357
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(2);
317-
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
358+
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
318359
oldSelection: oldSelection,
319360
newSelection: newSelection,
320361
removed: [],
321362
added: [combo.data[3]],
322363
event: undefined,
364+
owner: combo,
323365
displayText: `${newSelection.join(', ')}`,
324366
cancel: false
325367
});
@@ -328,12 +370,13 @@ describe('igxCombo', () => {
328370
newSelection = [combo.data[0]];
329371
combo.selectItems(newSelection, true);
330372
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(3);
331-
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
373+
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
332374
oldSelection: oldSelection,
333375
newSelection: newSelection,
334376
removed: oldSelection,
335377
added: newSelection,
336378
event: undefined,
379+
owner: combo,
337380
displayText: `${newSelection.join(', ')}`,
338381
cancel: false
339382
});
@@ -344,12 +387,13 @@ describe('igxCombo', () => {
344387
combo.deselectItems([newItem]);
345388
expect(combo.selectedItems().length).toEqual(0);
346389
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(4);
347-
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
390+
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
348391
oldSelection: oldSelection,
349392
newSelection: newSelection,
350393
removed: [combo.data[0]],
351394
added: [],
352395
event: undefined,
396+
owner: combo,
353397
displayText: `${newSelection.join(', ')}`,
354398
cancel: false
355399
});
@@ -372,6 +416,7 @@ describe('igxCombo', () => {
372416
added: [combo.data[0][combo.valueKey]],
373417
removed: [],
374418
event: undefined,
419+
owner: combo,
375420
displayText: `${combo.data[0][combo.displayKey]}`,
376421
cancel: false
377422
};
@@ -408,6 +453,7 @@ describe('igxCombo', () => {
408453
added: newSelection.map(e => e[combo.valueKey]),
409454
removed: [],
410455
event: undefined,
456+
owner: combo,
411457
displayText: `${newSelection.map(entry => entry[combo.displayKey]).join(', ')}`,
412458
cancel: false
413459
};
@@ -472,11 +518,12 @@ describe('igxCombo', () => {
472518
combo.selectAllItems(true);
473519
expect(combo.selectedItems()).toEqual(data);
474520
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(1);
475-
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
521+
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
476522
oldSelection: [],
477523
newSelection: data,
478524
added: data,
479525
removed: [],
526+
owner: combo,
480527
event: undefined,
481528
displayText: `${combo.data.join(', ')}`,
482529
cancel: false
@@ -485,11 +532,12 @@ describe('igxCombo', () => {
485532
combo.deselectAllItems(true);
486533
expect(combo.selectedItems()).toEqual([]);
487534
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(2);
488-
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
535+
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
489536
oldSelection: data,
490537
newSelection: [],
491538
added: [],
492539
removed: data,
540+
owner: combo,
493541
event: undefined,
494542
displayText: '',
495543
cancel: false
@@ -1879,12 +1927,13 @@ describe('igxCombo', () => {
18791927
expect(selectedItem_1.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
18801928
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(1);
18811929
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(
1882-
{
1930+
<IComboSelectionChangeEventArgs>{
18831931
newSelection: [selectedItem_1.value[combo.valueKey]],
18841932
oldSelection: [],
18851933
added: [selectedItem_1.value[combo.valueKey]],
18861934
removed: [],
18871935
event: UIInteractions.getMouseEvent('click'),
1936+
owner: combo,
18881937
displayText: selectedItem_1.value[combo.valueKey],
18891938
cancel: false
18901939
});
@@ -1896,12 +1945,13 @@ describe('igxCombo', () => {
18961945
expect(selectedItem_2.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
18971946
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(2);
18981947
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(
1899-
{
1948+
<IComboSelectionChangeEventArgs>{
19001949
newSelection: [selectedItem_1.value[combo.valueKey], selectedItem_2.value[combo.valueKey]],
19011950
oldSelection: [selectedItem_1.value[combo.valueKey]],
19021951
added: [selectedItem_2.value[combo.valueKey]],
19031952
removed: [],
19041953
event: UIInteractions.getMouseEvent('click'),
1954+
owner: combo,
19051955
displayText: selectedItem_1.value[combo.valueKey] + ', ' + selectedItem_2.value[combo.valueKey],
19061956
cancel: false
19071957
});
@@ -1914,12 +1964,13 @@ describe('igxCombo', () => {
19141964
expect(unselectedItem.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
19151965
expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(3);
19161966
expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(
1917-
{
1967+
<IComboSelectionChangeEventArgs>{
19181968
newSelection: [selectedItem_2.value[combo.valueKey]],
19191969
oldSelection: [selectedItem_1.value[combo.valueKey], selectedItem_2.value[combo.valueKey]],
19201970
added: [],
19211971
removed: [unselectedItem.value[combo.valueKey]],
19221972
event: UIInteractions.getMouseEvent('click'),
1973+
owner: combo,
19231974
displayText: selectedItem_2.value[combo.valueKey],
19241975
cancel: false
19251976
});

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
import { FormsModule, ReactiveFormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
1717
import { IgxCheckboxModule } from '../checkbox/checkbox.component';
1818
import { IgxSelectionAPIService } from '../core/selection';
19-
import { cloneArray, CancelableEventArgs, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
19+
import { cloneArray, IBaseEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs } from '../core/utils';
2020
import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
2121
import { FilteringLogic } from '../data-operations/filtering-expression.interface';
2222
import { IgxForOfModule, IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
@@ -89,7 +89,7 @@ export interface IComboFilteringOptions {
8989
}
9090

9191
/** Event emitted when an igx-combo's selection is changing */
92-
export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBaseEventArgs {
92+
export interface IComboSelectionChangeEventArgs extends IBaseCancelableEventArgs {
9393
/** An array containing the values that are currently selected */
9494
oldSelection: any[];
9595
/** An array containing the values that will be selected after this event */
@@ -105,7 +105,7 @@ export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBa
105105
}
106106

107107
/** Event emitted when the igx-combo's search input changes */
108-
export interface IComboSearchInputEventArgs extends CancelableEventArgs, IBaseEventArgs {
108+
export interface IComboSearchInputEventArgs extends IBaseCancelableEventArgs {
109109
/** The text that has been typed into the search input */
110110
searchText: string;
111111
}
@@ -453,7 +453,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
453453
* ```
454454
*/
455455
@Output()
456-
public onOpening = new EventEmitter<CancelableEventArgs & IBaseEventArgs>();
456+
public onOpening = new EventEmitter<IBaseCancelableBrowserEventArgs>();
457457

458458
/**
459459
* Emitted after the dropdown is opened
@@ -473,7 +473,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
473473
* ```
474474
*/
475475
@Output()
476-
public onClosing = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>();
476+
public onClosing = new EventEmitter<IBaseCancelableBrowserEventArgs>();
477477

478478
/**
479479
* Emitted after the dropdown is closed
@@ -513,7 +513,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
513513
* ```
514514
*/
515515
@Output()
516-
public onDataPreLoad = new EventEmitter<any>();
516+
public onDataPreLoad = new EventEmitter<IForOfState>();
517517

518518
/**
519519
* Gets/gets combo id.
@@ -1145,7 +1145,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
11451145
const newCollection = [...this.data];
11461146
newCollection.push(addedItem);
11471147
const args: IComboItemAdditionEvent = {
1148-
oldCollection, addedItem, newCollection
1148+
oldCollection, addedItem, newCollection, owner: this
11491149
};
11501150
this.onAddition.emit(args);
11511151
this.data.push(addedItem);
@@ -1238,8 +1238,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
12381238
this.manageRequiredAsterisk();
12391239
this.cdr.detectChanges();
12401240
}
1241-
this.virtDir.onChunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
1242-
this.onDataPreLoad.emit(e);
1241+
this.virtDir.onChunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e: IForOfState) => {
1242+
const eventArgs: IForOfState = Object.assign({}, e, { owner: this });
1243+
this.onDataPreLoad.emit(eventArgs);
12431244
});
12441245
}
12451246

@@ -1489,6 +1490,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
14891490
added,
14901491
removed,
14911492
event,
1493+
owner: this,
14921494
displayText,
14931495
cancel: false
14941496
};
@@ -1549,11 +1551,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
15491551
* @hidden
15501552
* @internal
15511553
*/
1552-
public handleOpening(event: CancelableEventArgs) {
1553-
this.onOpening.emit(event);
1554-
if (event.cancel) {
1555-
return;
1556-
}
1554+
public handleOpening(event: IBaseCancelableBrowserEventArgs) {
1555+
const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, event, { owner: this });
1556+
this.onOpening.emit(eventArgs);
1557+
event.cancel = eventArgs.cancel;
15571558
}
15581559

15591560
/**
@@ -1576,8 +1577,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
15761577
/**
15771578
* @hidden @internal
15781579
*/
1579-
public handleClosing(event) {
1580-
this.onClosing.emit(event);
1580+
public handleClosing(event: IBaseCancelableBrowserEventArgs) {
1581+
const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, event, { owner: this });
1582+
this.onClosing.emit(eventArgs);
1583+
event.cancel = eventArgs.cancel;
15811584
if (event.cancel) {
15821585
return;
15831586
}

‎projects/igniteui-angular/src/lib/core/utils.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,10 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs {
305305
event?: Event;
306306
}
307307

308+
export interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventArgs, IBaseEventArgs {}
309+
310+
export interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs {}
311+
308312
export const HORIZONTAL_NAV_KEYS = new Set(['arrowleft', 'left', 'arrowright', 'right', 'home', 'end']);
309313

310314
export const NAVIGATION_KEYS = new Set([

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ import {
6363
} from './date-picker.utils';
6464
import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes';
6565
import { IDatePicker } from './date-picker.common';
66-
import { KEYS, CancelableBrowserEventArgs, isIE, isEqual, IBaseEventArgs, mkenum } from '../core/utils';
66+
import { KEYS, isIE, isEqual, IBaseEventArgs, mkenum, IBaseCancelableBrowserEventArgs } from '../core/utils';
6767
import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives';
6868
import { IgxCalendarContainerComponent } from './calendar-container.component';
6969
import { InteractionMode } from '../core/enums';
@@ -605,7 +605,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
605605
* Emitted when the `IgxDatePickerComponent` is being closed.
606606
*/
607607
@Output()
608-
public onClosing = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>();
608+
public onClosing = new EventEmitter<IBaseCancelableBrowserEventArgs>();
609609

610610
/**
611611
* Emitted when selection is made in the calendar.

‎projects/igniteui-angular/src/lib/date-range-picker/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,9 @@ With projected inputs:
122122
| Name | Type | Description |
123123
|:-----------------|:----------------------|:------------|
124124
| rangeSelected | IgxDateRangePickerComponent | Emitted when a full range was selected in the `IgxDateRangePickerComponent`. |
125-
| onOpening | CancelableBrowserEventArgs & IBaseEventArgs | Emitted when the calendar starts opening, cancelable. |
125+
| onOpening | IBaseCancelableBrowserEventArgs | Emitted when the calendar starts opening, cancelable. |
126126
| onOpened | IBaseEventArgs | Emitted when the `IgxDateRangePickerComponent` is opened. |
127-
| onClosing | CancelableBrowserEventArgs & IBaseEventArgs | Emitted when the calendar starts closing, cancelable. |
127+
| onClosing | IBaseCancelableBrowserEventArgs | Emitted when the calendar starts closing, cancelable. |
128128
| onClosed | IBaseEventArgs | Emitted when the `IgxDateRangePickerComponent` is closed. |
129129

130130
### Methods

0 commit comments

Comments
 (0)