@@ -9295,6 +9295,95 @@ describe('DateRangePicker', () => {
9295
9295
expect(daterangePicker.inputElement.value === "1/1/2020 - 2/2/2020").toBe(true)
9296
9296
});
9297
9297
});
9298
+ describe('EJ2-47722 - If openOnFocus property is enabled then DateRangePicker popup does not closed properly',function(){
9299
+ let dateRangePicker:any;
9300
+ beforeEach(function(){
9301
+ let element: HTMLElement = createElement('input',{id:'date'});
9302
+ document.body.appendChild(element);
9303
+ dateRangePicker = new DateRangePicker({
9304
+ openOnFocus : true,
9305
+ presets: [{
9306
+ label: 'Today', start: new Date(), end: new Date() },
9307
+ { label: 'Last week', start: new Date(new Date().setDate(new Date().getDate() - 7)), end: new Date()
9308
+ }],
9309
+ });
9310
+ dateRangePicker.appendTo('#date');
9311
+ });
9312
+ afterEach(function(){
9313
+ if(dateRangePicker){
9314
+ dateRangePicker.destroy();
9315
+ }
9316
+ document.body.innerHTML = '';
9317
+ });
9318
+ it('check the popup open by focus the control',function(){
9319
+ dateRangePicker.inputFocusHandler();
9320
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9321
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9322
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9323
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9324
+ dateRangePicker.preventFocus = false;
9325
+ dateRangePicker.inputFocusHandler();
9326
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9327
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9328
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').classList.contains('e-active')).toBe(true);
9329
+ dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.click();
9330
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9331
+ dateRangePicker.preventFocus = false;
9332
+ dateRangePicker.inputFocusHandler();
9333
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9334
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9335
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.classList.contains('e-active')).toBe(true);
9336
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9337
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9338
+ dateRangePicker.preventFocus = false;
9339
+ dateRangePicker.inputFocusHandler();
9340
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:last-child')).click();
9341
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9342
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9343
+ document.getElementsByClassName('e-day')[15].dispatchEvent(clickEvent);
9344
+ document.getElementsByClassName('e-day')[16].dispatchEvent(clickEvent);
9345
+ dateRangePicker.applyButton.element.click();
9346
+ dateRangePicker.preventFocus = false;
9347
+ dateRangePicker.inputFocusHandler();
9348
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9349
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9350
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9351
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9352
+ });
9353
+ it('check the popup open by focus the control as well as by click the date range icon',function(){
9354
+ (<HTMLElement>document.getElementsByClassName(' e-input-group-icon e-range-icon e-icons')[0]).dispatchEvent(clickEvent);
9355
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9356
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9357
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9358
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9359
+ dateRangePicker.preventFocus = false;
9360
+ dateRangePicker.inputFocusHandler();
9361
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9362
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9363
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').classList.contains('e-active')).toBe(true);
9364
+ dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.click();
9365
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9366
+ (<HTMLElement>document.getElementsByClassName(' e-input-group-icon e-range-icon e-icons')[0]).dispatchEvent(clickEvent);
9367
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).toBe(null);
9368
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9369
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child').nextElementSibling.classList.contains('e-active')).toBe(true);
9370
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9371
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9372
+ dateRangePicker.preventFocus = false;
9373
+ dateRangePicker.inputFocusHandler();
9374
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:last-child')).click();
9375
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9376
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9377
+ document.getElementsByClassName('e-day')[15].dispatchEvent(clickEvent);
9378
+ document.getElementsByClassName('e-day')[16].dispatchEvent(clickEvent);
9379
+ dateRangePicker.applyButton.element.click();
9380
+ (<HTMLElement>document.getElementsByClassName(' e-input-group-icon e-range-icon e-icons')[0]).dispatchEvent(clickEvent);
9381
+ expect(dateRangePicker.popupObj.element.querySelector('.e-date-range-container')).not.toBe(null);
9382
+ expect(dateRangePicker.popupObj.element.querySelector('.e-presets')).not.toBe(null);
9383
+ <HTMLElement>(dateRangePicker.popupObj.element.querySelector('.e-presets li:first-child')).click();
9384
+ expect(document.body.contains(dateRangePicker.popupObj)).toBe(false);
9385
+ });
9386
+ });
9298
9387
});
9299
9388
interface CalendarElement {
9300
9389
leftCalTitle: HTMLElement;
0 commit comments