Skip to content

Commit c8b9243

Browse files
LipataLipata
authored
Merge branch '9.1.x' into bpenkov/time-picker-editing-9.1
2 parents 315e87f + c58a10d commit c8b9243

File tree

8 files changed

+128
-16
lines changed

8 files changed

+128
-16
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,6 @@
137137

138138
%date-picker--vertical {
139139
min-width: 368px; /* 168px for header + 200px for the content */
140-
max-width: 540px;
141140
}
142141

143142
%date-picker--dropdown {

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

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentFixture, async, TestBed, fakeAsync, tick } from '@angular/core/testing';
1+
import { ComponentFixture, TestBed, fakeAsync, tick, async } from '@angular/core/testing';
22
import { Component, OnInit, ViewChild, DebugElement } from '@angular/core';
33
import { IgxInputGroupModule } from '../input-group/public_api';
44
import { InteractionMode } from '../core/enums';
@@ -599,7 +599,41 @@ describe('IgxDateRangePicker', () => {
599599
expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
600600
expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
601601
}));
602+
603+
it('should not open calendar with ALT + DOWN ARROW key if disabled is set to true', fakeAsync(() => {
604+
fixture.componentInstance.mode = InteractionMode.DropDown;
605+
fixture.componentInstance.disabled = true;
606+
fixture.detectChanges();
607+
608+
spyOn(dateRange.onOpening, 'emit').and.callThrough();
609+
spyOn(dateRange.onOpened, 'emit').and.callThrough();
610+
611+
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', calendar, true);
612+
tick(DEBOUNCE_TIME * 2);
613+
fixture.detectChanges();
614+
expect(dateRange.collapsed).toBeTruthy();
615+
expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(0);
616+
expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(0);
617+
}));
602618
});
619+
620+
it('should expand the calendar if the default icon is clicked', fakeAsync(() => {
621+
const input = fixture.debugElement.query(By.css('igx-input-group'));
622+
input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
623+
tick();
624+
fixture.detectChanges();
625+
expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy();
626+
}));
627+
628+
it('should not expand the calendar if the default icon is clicked when disabled is set to true', fakeAsync(() => {
629+
fixture.componentInstance.disabled = true;
630+
fixture.detectChanges();
631+
const input = fixture.debugElement.query(By.css('igx-input-group'));
632+
input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
633+
tick();
634+
fixture.detectChanges();
635+
expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
636+
}));
603637
});
604638

605639
describe('Two Inputs', () => {
@@ -876,6 +910,21 @@ describe('IgxDateRangePicker', () => {
876910
expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
877911
expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
878912
}));
913+
914+
it('should not open calendar with ALT + DOWN ARROW key if disabled is set to true', fakeAsync(() => {
915+
fixture.componentInstance.disabled = true;
916+
fixture.detectChanges();
917+
918+
spyOn(dateRange.onOpening, 'emit').and.callThrough();
919+
spyOn(dateRange.onOpened, 'emit').and.callThrough();
920+
921+
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', calendar, true);
922+
tick(DEBOUNCE_TIME * 2);
923+
fixture.detectChanges();
924+
expect(dateRange.collapsed).toBeTruthy();
925+
expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(0);
926+
expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(0);
927+
}));
879928
});
880929

881930
it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => {
@@ -915,6 +964,24 @@ describe('IgxDateRangePicker', () => {
915964
.toBeTruthy();
916965
}));
917966

967+
it('should expand the calendar if the default icon is clicked', fakeAsync(() => {
968+
const icon = fixture.debugElement.query(By.css('igx-picker-toggle'));
969+
icon.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
970+
tick();
971+
fixture.detectChanges();
972+
expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy();
973+
}));
974+
975+
it('should not expand the calendar if the default icon is clicked when disabled is set to true', fakeAsync(() => {
976+
fixture.componentInstance.disabled = true;
977+
fixture.detectChanges();
978+
const icon = fixture.debugElement.query(By.css('igx-picker-toggle'));
979+
icon.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
980+
tick();
981+
fixture.detectChanges();
982+
expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
983+
}));
984+
918985
describe('Data binding', () => {
919986
it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
920987
fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);
@@ -1065,6 +1132,7 @@ export class DateRangeTestComponent implements OnInit {
10651132
[x: string]: any;
10661133
public doneButtonText: string;
10671134
public mode: InteractionMode;
1135+
public disabled = false;
10681136
public minValue: Date | String;
10691137
public maxValue: Date | String;
10701138

@@ -1078,16 +1146,19 @@ export class DateRangeTestComponent implements OnInit {
10781146
@Component({
10791147
selector: 'igx-date-range-single-input-test',
10801148
template: `
1081-
<igx-date-range-picker [mode]="mode" [minValue]="minValue" [maxValue]="maxValue">
1149+
<igx-date-range-picker [mode]="mode" [disabled]="disabled" [minValue]="minValue" [maxValue]="maxValue">
10821150
</igx-date-range-picker>
10831151
`
10841152
})
1085-
export class DateRangeDefaultComponent extends DateRangeTestComponent { }
1153+
export class DateRangeDefaultComponent extends DateRangeTestComponent {
1154+
public disabled = false;
1155+
}
10861156

10871157
@Component({
10881158
selector: 'igx-date-range-two-inputs-test',
10891159
template: `
1090-
<igx-date-range-picker [mode]="mode" [(ngModel)]="range" [inputFormat]="inputFormat" [displayFormat]="displayFormat" required>
1160+
<igx-date-range-picker [mode]="mode" [disabled]="disabled" [(ngModel)]="range"
1161+
[inputFormat]="inputFormat" [displayFormat]="displayFormat" required>
10911162
<igx-date-range-start>
10921163
<igx-picker-toggle igxPrefix>
10931164
<igx-icon>calendar_view_day</igx-icon>
@@ -1101,9 +1172,10 @@ export class DateRangeDefaultComponent extends DateRangeTestComponent { }
11011172
`
11021173
})
11031174
export class DateRangeTwoInputsTestComponent extends DateRangeTestComponent {
1104-
range;
1105-
inputFormat: string;
1106-
displayFormat: string;
1175+
public range;
1176+
public inputFormat: string;
1177+
public displayFormat: string;
1178+
public disabled = false;
11071179
}
11081180
@Component({
11091181
selector: 'igx-date-range-two-inputs-ng-model',

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
247247
* ```
248248
*/
249249
@Input()
250-
public disabled: boolean;
250+
public disabled = false;
251251

252252
/**
253253
* Sets the `placeholder` for single-input `IgxDateRangePickerComponent`.
@@ -431,7 +431,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
431431
* ```
432432
*/
433433
public open(overlaySettings?: OverlaySettings): void {
434-
if (!this.collapsed) { return; }
434+
if (!this.collapsed || this.disabled) { return; }
435435

436436
this.updateCalendar();
437437
const settings = this.mode === InteractionMode.Dialog ? this.dialogOverlaySettings : this.dropdownOverlaySettings;
@@ -623,9 +623,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
623623
this._statusChanges$ = this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
624624
}
625625

626-
// delay the invocation of initialSetValue
627-
// until the current change detection cycle has completed
626+
// delay invocations until the current change detection cycle has completed
628627
Promise.resolve().then(() => {
628+
this.updateDisabledState();
629629
this.initialSetValue();
630630
this.updateInputs();
631631
});
@@ -644,6 +644,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
644644
if (changes['inputFormat'] && this.hasProjectedInputs) {
645645
this.updateInputFormat();
646646
}
647+
if (changes['disabled']) {
648+
this.updateDisabledState();
649+
}
647650
}
648651

649652
/** @hidden @internal */
@@ -759,6 +762,19 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
759762
this.setRequiredToInputs();
760763
}
761764

765+
private updateDisabledState() {
766+
if (this.hasProjectedInputs) {
767+
const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
768+
const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
769+
start.inputDirective.disabled = this.disabled;
770+
end.inputDirective.disabled = this.disabled;
771+
return;
772+
}
773+
if (this.inputDirective) {
774+
this.inputDirective.disabled = this.disabled;
775+
}
776+
}
777+
762778
private getInputState(focused: boolean): IgxInputState {
763779
if (focused) {
764780
return this._ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,16 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
297297
return info ? info.closeAnimationPlayer : false;
298298
}
299299

300+
/**
301+
* Returns the id of the overlay the content is rendered in.
302+
* ```typescript
303+
* this.myToggle.overlayId;
304+
* ```
305+
*/
306+
public get overlayId() {
307+
return this._overlayId;
308+
}
309+
300310
/**
301311
* Repositions the toggle.
302312
* ```typescript

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -765,7 +765,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
765765
this.selectionService.addKeyboardRange();
766766
this.selectionService.initKeyboardState();
767767
this.selectionService.primaryButton = false;
768-
this.gridAPI.submit_value();
768+
// Ensure RMB Click on edited cell does not end cell editing
769+
if (!this.selected) {
770+
this.gridAPI.submit_value();
771+
}
769772
return;
770773
}
771774
this.selectionService.pointerDown(this.selectionNode, event.shiftKey, event.ctrlKey);

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2893,6 +2893,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
28932893
});
28942894

28952895
this.overlayService.onOpened.pipe(destructor).subscribe((event) => {
2896+
const overlaySettings = this.overlayService.getOverlayById(event.id)?.settings;
2897+
28962898
// do not hide the advanced filtering overlay on scroll
28972899
if (this._advancedFilteringOverlayId === event.id) {
28982900
const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
@@ -2903,8 +2905,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
29032905
return;
29042906
}
29052907

2906-
if (this.overlayService.getOverlayById(event.id)?.settings?.outlet === this.outlet &&
2907-
this.overlayIDs.indexOf(event.id) < 0) {
2908+
// do not hide the overlay if it's attached to a row
2909+
if (this.rowEditingOverlay?.overlayId === event.id) {
2910+
return;
2911+
}
2912+
2913+
if (overlaySettings?.outlet === this.outlet && this.overlayIDs.indexOf(event.id) === -1) {
29082914
this.overlayIDs.push(event.id);
29092915
}
29102916
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive } from '@angular/core';
1+
import { Directive } from '@angular/core';
22
import { ConnectedPositioningStrategy } from '../services/public_api';
33
import { VerticalAlignment, PositionSettings } from '../services/overlay/utilities';
44
import { scaleInVerBottom, scaleInVerTop } from '../animations/main';

‎projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2584,6 +2584,12 @@ describe('IgxGrid - Cell selection #grid', () => {
25842584
cell.editValue = 'No name';
25852585
fix.detectChanges();
25862586

2587+
UIInteractions.simulateNonPrimaryClick(cell);
2588+
fix.detectChanges();
2589+
expect(cell.editMode).toEqual(true);
2590+
expect(cell.editValue).toEqual('No name');
2591+
expect(cell.value).not.toEqual('No name');
2592+
25872593
const target = grid.getCellByColumn(0, 'Age');
25882594
UIInteractions.simulateNonPrimaryClick(target);
25892595
fix.detectChanges();

0 commit comments

Comments
 (0)